移动端百度地图多点标注php,PHP学习：php+js实现百度地图多点标注的方法

《PHP学习：php+js实现百度地图多点标注的方法》要点：

本文介绍了PHP学习：php+js实现百度地图多点标注的方法，希望对您有用。如果有疑问，可以联系我们。

PHP教程

PHP教程1.php创建json数据

PHP教程

$products = $this->product_db->select($where);

$products_json = json_encode($products);

PHP教程2.js传入json数据

PHP教程类似于这样的结构

PHP教程

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"

}];

PHP教程js擅长处理json数据

PHP教程

var products_json = {$products_json};

// 百度地图

var citymap = new citymap(products_json,'宿迁');

PHP教程3.处理地图

PHP教程

document.write('');

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 = '

' + pro.name + '

';

//pop弹窗信息

var html = [];

html.push('

html.push('

');

html.push('

地址:');

html.push('

' + pro.address + ' ');

html.push('

');

html.push('

');

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教程更多关于PHP相关内容感兴趣的读者可查看本站专题：《php curl用法总结》、《PHP数组(Array)操作技巧大全》、《php排序算法总结》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》、《PHP数学运算技巧总结》、《php正则表达式用法总结》、《PHP运算与运算符用法总结》、《php字符串(string)用法总结》及《php常见数据库操作技巧汇总》

PHP教程希望本文所述对大家PHP程序设计有所帮助.