php+js实现百度地图多点标注的方法
发布时间：2020-12-12 21:53:44 所属栏目：PHP教程 来源：网络整理
导读：本篇章节讲解php+js实现百度地图多点标注的方法。供大家参考研究具体如下： 1.php创建json数据 product_db->select($where);$products_json = json_encode($products); 2.js传入json数据 类似于这样的结构 js擅长处理json数据 3.处理地图 '; //pop
|
本篇章节讲解php+js实现百度地图多点标注的方法。分享给大家供大家参考，具体如下：
1.php创建json数据 product_db->select($where);
$products_json = json_encode($products);
2.js传入json数据 类似于这样的结构 js擅长处理json数据
var products_json = {$products_json};
// 百度地图
var citymap = new citymap(products_json,'宿迁');
3.处理地图 ');
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,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,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 = '
';
//pop弹窗信息
var html = [];
html.push('
|
