js-Comment implémenter plusieurs points d'annotation sur la carte Baidu

Le contenu de cet article explique comment implémenter plusieurs points de marquage sur la carte js-Baidu. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

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

Rendu :

ci-dessus est une introduction complète à la façon d'implémenter plusieurs points d'annotation sur la carte js-Baidu. Si vous souhaitez en savoir plus sur les didacticiels vidéo JavaScript, veuillez prêter attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!