js-百度地图多个标注点是如何实现的

本篇文章给大家带来的内容是关于js-百度地图多个标注点是如何实现的，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

        
              
                                        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 = '
' + poi.title + '
';//pop弹窗信息                                              var html = [];                                              html.push('

登录后复制’);                                              html.push(”);                                              html.push(‘地址:’);                                              html.push(” + poi.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;                                             }  //异步调用百度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;                         

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:

登录后复制

效果图：

以上就是对js-百度地图多个标注点是如何实现的的全部介绍，如果您想了解更多有关JavaScript视频教程，请关注PHP中文网。

以上就是js-百度地图多个标注点是如何实现的的详细内容，更多请关注【创想鸟】其它相关文章！