这篇文章主要介绍了php+js实现百度地图多点标注的方法,涉及php结合js针对百度地图接口调用与json操作相关技巧,需要的朋友可以参考下
具体如下:
1.php创建json数据
$products = $this->product_db->select($where);
$products_json = json_encode($products);
2.js传入json数据
类似于这样的结构
var markerarr = [{
title: "名称:广州火车站",
point: "113.264531,23.157003",
address: "广东省广州市广州火车站",
tel: "12306"
}, {
title: "名称:广州塔(赤岗塔)",
point: "113.330934,23.113401",
address: "广东省广州市广州塔(赤岗塔) ",
tel: "18500000000"
}, {
title: "名称:广州动物园",
point: "113.312213,23.147267",
address: "广东省广州市广州动物园",
tel: "18500000000"
}, {
title: "名称:天河公园",
point: "113.372867,23.134274",
address: "广东省广州市天河公园",
tel: "18500000000"
}];
js擅长处理json数据
<script>
var products_json = {$products_json};
// 百度地图
var citymap = new citymap(products_json,'宿迁');
</script>
3.处理地图
document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1we8imivxznakmujzirldz0v"></script>');
function citymap(markerarr, cityname){
this.markerarr = markerarr;
this.cityname = cityname;
this.initmap = function() {
this.createmap();//创建地图
this.setmapevent();//设置地图事件
this.addmapcontrol();//向地图添加控件
};
this.createmap = function() {
var map = new bmap.map("ditucontent");//在百度地图容器中创建一个地图
map.centerandzoom(cityname,'13');
window.map = map;//将map变量存储在全局
// 绘制点
for (var i = 0; i < markerarr.length; i++) {
var p0 = markerarr[i].baidu_lng;
var p1 = markerarr[i].baidu_lat;
var maker = this.addmarker(new window.bmap.point(p0, p1),markerarr[i],i );
this.addinfowindow(maker, markerarr[i], i);
}
};
this.addmarker = function(point,pro,index) {
var myicon = new bmap.icon("http://api.map.baidu.com/img/markers.png",
new bmap.size(23, 25), {
offset: new bmap.size(10, 25),
imageoffset: new bmap.size(0, 0 - index * 25)
});
var marker = new bmap.marker(point, {
icon: myicon
});
map.addoverlay(marker);
var label = new bmap.label(pro.name,{offset:new bmap.size(20,-10)});
// 设置label样式
label.setstyle({
color : "#cc3333",
fontsize : "13px",
backgroundcolor :"#ccffff",
border :"0",
fontweight :"bold"
});
marker.setlabel(label);
return marker;
};
this.addinfowindow = function(marker,pro) {
//pop弹窗标题
var title = '<p style="font-weight:bold;color:#ce5521;font-size:14px"><a href="?m=home&c=product&id='+ pro.id +'">' + pro.name + '</a></p>';
//pop弹窗信息
var html = [];
html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
html.push('<tr>');
html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
html.push('<td style="vertical-align:top;line-height:16px">' + pro.address + ' </td>');
html.push('</tr>');
html.push('</tbody></table>');
var infowindow = new bmap.infowindow(html.join(""), {
title: title,
width: 200
});
var openinfowinfun = function() {
marker.openinfowindow(infowindow);
};
marker.addeventlistener("click", openinfowinfun);
return openinfowinfun;
}
this.setmapevent = function() {
map.enabledragging();//启用地图拖拽事件,默认启用(可不写)
// map.enablescrollwheelzoom();//启用地图滚轮放大缩小
map.enabledoubleclickzoom();//启用鼠标双击放大,默认启用(可不写)
map.enablekeyboard();//启用键盘上下左右键移动地图
};
this.addmapcontrol = function() {
//向地图中添加缩放控件
var ctrl_nav = new bmap.navigationcontrol({anchor:bmap_anchor_top_left,type:bmap_navigation_control_large});
map.addcontrol(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new bmap.overviewmapcontrol({anchor:bmap_anchor_bottom_right,isopen:1});
map.addcontrol(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new bmap.scalecontrol({anchor:bmap_anchor_bottom_left});
map.addcontrol(ctrl_sca);
};
this.initmap();
}
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关推荐:
php实现获取ip及网址的方法
php中laravel 关联查询返回错误id的解决方法详解
php file_get_contents实现取文件中数组元素的方法
以上就是php+js实现百度地图多点标注的详细内容。