js-How to implement multiple annotation points on Baidu map

The content of this article is about how to implement multiple marking points on js-Baidu map. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<div class = "demo_main">

        <fieldset class = "demo_content">

              <div class = "min-height:400px; width:100%;" id = "map"></div>

               <script type = "text/javascript">

                         var markerArr = [

                               {

                                 title: "名称：锦江区门诊部",
                                 point: "104.118821,30.642073",
                                 address: "成都市锦江区通源街188号",
                                 tel: "028-86712080"

                               },

                               {
                                  title: "名称：青羊区门诊部",
                                  point: "104.000092,30.672099",
                                  address: "成都市青羊区春晓路15号 ",
                                  tel: "028-81067120"
                                },
                                {
                                  title: "名称：高新区门诊部",
                                  point: "104.061895,30.556204",
                                  address: "成都市高新区益州大道中段和天府二街交叉口复城国际T3-2号",
                                  tel: "028-81067120"
                                },

                          ];

                            var map; //Map实例 
                            function map_init() {
                                       map = new BMap.Map("map");
//第1步：设置地图中心点，成都市 
                                       var point = new BMap.Point(104.082684, 30.656319);
//第2步：初始化地图,设置中心点坐标和地图级别。 
                                        map.centerAndZoom(point, 13);
//第3步：启用滚轮放大缩小 
                                        map.enableScrollWheelZoom(true);
//第4步：向地图中添加缩放控件 
                                        var ctrlNav = new window.BMap.NavigationControl({
                                              anchor: BMAP_ANCHOR_TOP_LEFT,
                                              type: BMAP_NAVIGATION_CONTROL_LARGE
                                         });
                                         map.addControl(ctrlNav);
//第5步：向地图中添加缩略图控件 
                                          var ctrlOve = new window.BMap.OverviewMapControl({
                                                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                                                isOpen: 1
                                            });
                                          map.addControl(ctrlOve);

//第6步：向地图中添加比例尺控件 
                                          var ctrlSca = new window.BMap.ScaleControl({
                                                anchor: BMAP_ANCHOR_BOTTOM_LEFT
                                            });
                                           map.addControl(ctrlSca);

//第7步：绘制点 
                                          for(var i = 0; i < markerArr.length; i++) {
                                                      var p0 = markerArr[i].point.split(",")[0];
                                                      var p1 = markerArr[i].point.split(",")[1];
                                                      var maker = addMarker(new window.BMap.Point(p0, p1), i);
                                                      addInfoWindow(maker, markerArr[i], i);
                                             }
                                     }

 

// 添加标注 
                                            function addMarker(point, 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);
                                                                    return marker;
                                                }

 

 

// 添加信息窗口 
                                      function addInfoWindow(marker, poi) {
//pop弹窗标题 
                                            var title = &#39;<div style="font-weight:bold;color:#CE5521;font-size:14px">&#39; + poi.title + &#39;</div>&#39;;
//pop弹窗信息 
                                             var html = [];
                                              html.push(&#39;<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>&#39;);
                                              html.push(&#39;<tr>&#39;);
                                              html.push(&#39;<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>&#39;);
                                              html.push(&#39;<td style="vertical-align:top;line-height:16px">&#39; + poi.address + &#39; </td>&#39;);
                                              html.push(&#39;</tr>&#39;);
                                              html.push(&#39;</tbody></table>&#39;);
                                             var infoWindow = new BMap.InfoWindow(html.join(""), {
                                                     title: title,
                                                     width: 200
                                              });

                                             var openInfoWinFun = function() {
                                                       marker.openInfoWindow(infoWindow);
                                                };
                                           marker.addEventListener("click", openInfoWinFun);
                                                    return openInfoWinFun;
                                             }

 

 

//异步调用百度js 
          function map_load() {
                     var load = document.createElement("script");
                      load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
                      document.body.appendChild(load);
             }
              window.onload = map_load;

                </script>

         </fieldset>

</div>

css:

body { margin: 0; font-family: "Helvetica,Arial,FreeSans"; color: #000000; font-size: 12px; } 
.demo_main { padding: 20px; padding-top: 10px; } 
.demo_title { padding: 10px; margin-bottom: 10px; background-color: #D3D8E0; } 
.demo_content { padding: 10px; margin-bottom: 10px; }

js:

<script src="http://www.w3school.com.cn/jquery/jquery.js" type="text/javascript"></script>

Rendering:

##The above is the js-Baidu map A full introduction to how multiple annotation points are implemented. If you want to know more about JavaScript video tutorials, please pay attention to the PHP Chinese website.

The above is the detailed content of js-How to implement multiple annotation points on Baidu map. For more information, please follow other related articles on the PHP Chinese website!