PHP+JS realization of Baidu Map multi-point labeling method

This paper describes the method of Php+js to realize the multi-point labeling of Baidu map. Share to everyone for your reference, as follows:



1.php Creating JSON data

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

2.js Incoming JSON data
A structure similar to this

var Markerarr = [{  title: "Name: Guangzhou railway Station", point  : "113.264531,23.157003",  address: "Guangdong Province Guangzhou Guangzhou railway Station",  Tel: " 12306 "}, {  title:" Name: Canton Tower (Stanley) ", Point  :" 113.330934,23.113401 ",  address:" Guangdong Province Guangzhou Canton Tower (Stanley) ",  Tel:" 18500000000 "}, {  title:" Name: Guangzhou Zoo ", point  :" 113.312213,23.147267 ",  address:" Guangdong Province Guangzhou Guangzhou Zoo ",  Tel:" 18500000000 "}, {  title:" Name: Tianhe Park ", point  :" 113.372867,23.134274 ",  Address:" Tianhe Park, Guangzhou, Guangdong Province ",  Tel:" 18500000000 "}];

JS is good at working with JSON data

<script>var Products_json = {$products _json};//baidu map var citymap = new Citymap (Products_json, ' Suqian '); </script >

3. Working with Maps

document.write (' <script type= ' text/javascript ' src= ' </script> '); function Citymap (Markerarr, CityName) {  This.markerarr = Markerarr;  This.cityname = CityName; This.initmap = function () {this.createmap ();//Create Map this.setmapevent ();//Set Map event This.addmapcontrol ();//Add control to map}  ; This.createmap = function () {var map = new Bmap.map ("ditucontent");//Create a map in the Baidu map container map.centerandzoom (cityname, ' 13 ')    ); Window.map = map;//Stores the map variable in the global//Draw point for (var i = 0; i < markerarr.length; i++) {var p0 = Markerarr[i].bai      DU_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, {offset:new bmap.size (+), 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)});      Set the label style Label.setstyle ({color: "#CC3333", FontSize: "13px", BackgroundColor: "#CCFFFF",    Border: "0", FontWeight: "Bold"});    Marker.setlabel (label);  return marker;  }; This.addinfowindow = function (marker,pro) {//pop popup title 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 popup information 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"    > Address:</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 ();//enable map drag events, enabled by default (can not be written)//Map.enablescrollwheelzoom ();//Enable map wheel  Zoom in and out map.enabledoubleclickzoom ();//enable mouse double-click to zoom in, enabled by default (can not write) Map.enablekeyboard ();//enable keyboard to move the map up or down; This.addmapcontrol = function () {//Add a zoom control to the map var Ctrl_nav = new Bmap.navigationcontrol ({Anchor:bmap_anchor_top_lef    T,type:bmap_navigation_control_large});      Map.addcontrol (Ctrl_nav);    Add a thumbnail control to the map var ctrl_ove = new Bmap.overviewmapcontrol ({anchor:bmap_anchor_bottom_right,isopen:1});      Map.addcontrol (Ctrl_ove); Add a scale control to a map var Ctrl_sca = new Bmap.scalecontrol ({Anchor:bmap_ancHor_bottom_left});  Map.addcontrol (CTRL_SCA);  }; This.initmap ();}

The above is PHP+JS implementation of Baidu Map multi-point Labeling method content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

