新聞動態

                                                                                  位置:首頁 新聞動態 常見問題

                                                                                  百度地圖多個標記實現案例

                                                                                  新聞動態
                                                                                  2023年05月02日 閱讀:3049次
                                                                                  var xy = [
                                                                                    { x: 112.099915, y: 32.096532 },
                                                                                    { x: 112.099915, y: 32.096532 },
                                                                                    { x: 112.091255, y: 32.094483 }
                                                                                  ];var name = [
                                                                                    { name: "速建時代1", Info: "1襄陽市樊城區萬洲大道中南市場B3棟27號
                                                                                  電話:1320-7250-969" },
                                                                                    { name: "速建時代2", Info: "2襄陽市樊城區萬洲大道中南市場B3棟27號
                                                                                  電話:1320-7250-969" },
                                                                                    { name: "速建時代3", Info: "3襄陽市樊城區萬洲大道中南市場B3棟27號
                                                                                  電話:1320-7250-969" }
                                                                                  ];// 百度地圖API功能 
                                                                                  console.log(this.xy[0])
                                                                                  var map = new BMap.Map("allmap"); // 創建Map實例 
                                                                                  map.centerAndZoom(new BMap.Point(this.xy[0].x, 
                                                                                  this.xy[0].y), 12); // 初始化地圖,設置中心點坐標和地圖級別 
                                                                                  map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放var 
                                                                                  markers = [];var 
                                                                                  infoWindows = [];
                                                                                  for (var i = 0; i < xy.length; i++) { 
                                                                                   var point = new BMap.Point(xy[i].x, xy[i].y);  
                                                                                   var marker = new BMap.Marker(point);
                                                                                    map.addOverlay(marker);
                                                                                  
                                                                                    markers.push(marker);
                                                                                    infoWindows.push(new BMap.InfoWindow(name[i].Info, { width: 300, height: 80, title: name[i].name }));
                                                                                  }
                                                                                  
                                                                                  markers.forEach(function(marker, index) {
                                                                                    marker.addEventListener("click", function() {
                                                                                      map.openInfoWindow(infoWindows[index], marker.getPosition());
                                                                                    });
                                                                                  });

                                                                                  來源于:百度地圖多個標記實現案例 (hbsjsd.cn)

                                                                                  上一篇

                                                                                  下一篇

                                                                                  亚洲中文字幕在线19页_99久久国产精品免费热7788_欧美专区日韩专区综合专区_小泽玛利亚一区_gogo999亚洲肉体艺术