百度地图多点标注实现

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'<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1We8imivxZnaKMujZIrlDZ0v"></script>'function citymap(markerArr, cityName)thisthisthisfunction() this//创建地图this//设置地图事件this//向地图添加控件thisfunction() varnew"dituContent"//在百度地图容器中创建一个地图'13'window//将map变量存储在全局// 绘制点forvar0varvarvarthisnewwindowthisthisfunction(point,pro,index) varnew"http://api.map.baidu.com/img/markers.png"new2325new1025new0025varnewvarnewnew20-10// 设置label样式"#CC3333""13px""#CCFFFF""0""bold"returnthisfunction(marker,pro) //pop弹窗标题  var'<div style="font-weight:bold;color:#CE5521;font-size:14px"><a href="?m=home&c=product&id=''">''</a></div>'//pop弹窗信息  var'<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>''<tr>''<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>''<td style="vertical-align:top;line-height:16px">'' </td>''</tr>''</tbody></table>'varnew""200varfunction() "click"returnthisfunction() //启用地图拖拽事件，默认启用(可不写)// map.enableScrollWheelZoom();//启用地图滚轮放大缩小//启用鼠标双击放大，默认启用(可不写)//启用键盘上下左右键移动地图thisfunction() //向地图中添加缩放控件varnew//向地图中添加缩略图控件varnew1//向地图中添加比例尺控件varnewthis