搜尋

首頁  >  問答  >  主體

javascript 開發百度地圖

javascript 開發百度地圖

1、完成內容,依照不同業態類型(A,B,C,D,E),標註不同圖示(完成)

2、點選標註點分別彈出markerArr數組內的title,yetai等內容目前可以彈出標註點內容,但是永遠都是markerArr數組內的最後一條數據,請問應該怎樣才可以點擊標註點後彈出對應的標註點數組信息。

求大神指點,感激不盡,謝謝。

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#allmap{height:100%}  
</style>  
<script type="text/javascript" src=>
//v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />    
</head>  
 
<body>  
<div id="allmap"></div> 
<script type="text/javascript">



 var markerArr = [
                               {
                                 title: "名称:北京超市(总部)",
                                 point: "116.333405,39.974042",
                                 address: "北京市海淀区",
                                 tel: "010-88888888",
                                 yetai:"Y"
                               },
                               {
                                  title: "名称:超市发(双榆树店)",
                                  point: "116.331637,39.973424",
                                  address: "北京市海淀区北三环西路双榆树西里7号 ",
                                  tel: "010-62640346",
                                  yetai:"A"
                                },
                                {
                                  title: "名称:超市发(科学城店)",
                                  point: "116.324596,39.986931",
                                  address: "海淀区中关村南路77号",
                                  tel: "010-62551377",
                                  yetai:"B"
                                },
                                {
                                  title: "名称:超市发(魏公村店)",
                                  point: "116.326296,39.960478",
                                  address: "地址:北京市海淀区魏公村街1号2号楼底商临01",
                                  tel: "010-88570042",
                                  yetai:"C"
                                },
                                {
                                  title: "名称:超市发(白颐路店)",
                                  point: "116.33458,39.951854",
                                  address: "地址:北京市海淀区中国气象局社区南区22号楼底商",
                                  tel: "010-58995553",
                                  yetai:"D"
                                },
                                {
                                  title: "名称:超市发(上地店)",
                                  point: "116.318805,40.03683",
                                  address: "地址:上地信息路19-3号",
                                  tel: "010-62971745",
                                  yetai:"E"
                                },
                               {
                                  title: "名称:超市发(xxxx店)",
                                  point: "116.318805,40.03620",
                                  address: "北京市海淀区北三环西路号 ",
                                  tel: "010-62640346",
                                  yetai:"A"
                                },
                          ];

                    

                         function map_init() {
                              // 创建地图实例  
                            var map = new BMap.Map("allmap");
                            // 创建点坐标 
                            var point = new BMap.Point(116.333405,39.974042);
                             
                             // 初始化地图,设置中心点坐标和地图级别 
                            map.centerAndZoom(point, 13);

                                //开启鼠标滚轮缩放 
                            map.enableScrollWheelZoom(true);

                            var ctrlNav = new window.BMap.NavigationControl({
                                              anchor: BMAP_ANCHOR_TOP_LEFT,
                                              type: BMAP_NAVIGATION_CONTROL_LARGE
                                         });
                                         map.addControl(ctrlNav);

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

                            //存放标注点经纬度信息数组
                            var point = new Array();
                            //存放标注点对象数组
                            var marker = new Array();
                            var marker2 = new Array();


                            //设置允许信息窗发送消息
                            var opts = {enableMessage:true};
                            var info = new Array(); //存放提示信息窗口对象的数组
                        
                       
                              for (var i = 0;i<markerArr.length;i++){
                                    var p0 = markerArr[i].point.split(",")[0];
                                    var p1 = markerArr[i].point.split(",")[1];
                                    point[i] = new window.BMap.Point(p0,p1);
                                    marker[i] = new window.BMap.Marker(point[i]);
                                  


                                    var aIcon = new BMap.Icon("images/a.png", new BMap.Size(30,30));
                                    var bIcon = new BMap.Icon("images/b.png", new BMap.Size(30,30));
                                    var cIcon = new BMap.Icon("images/c.png", new BMap.Size(30,30));
                                    var dIcon = new BMap.Icon("images/d.png", new BMap.Size(30,30));
                                    var eIcon = new BMap.Icon("images/e.png", new BMap.Size(30,30));
                                    var yIcon = new BMap.Icon("images/y.png", new BMap.Size(30,30));
                                    if (markerArr[i].yetai=="A"){
                                        marker[i] = new window.BMap.Marker(point[i],{icon:aIcon});
                                    }else if(markerArr[i].yetai=="B"){
                                        marker[i] = new window.BMap.Marker(point[i],{icon:bIcon});
                                       
                                    }else if(markerArr[i].yetai=="C"){
                                        marker[i] = new window.BMap.Marker(point[i],{icon:cIcon});
                                        
                                    }else if(markerArr[i].yetai=="D"){
                                        marker[i] = new window.BMap.Marker(point[i],{icon:dIcon});
                                        
                                    }else if(markerArr[i].yetai=="E"){
                                        marker[i] = new window.BMap.Marker(point[i],{icon:eIcon});
                                        
                                    }else if(markerArr[i].yetai=="Y"){
                                        marker[i] = new window.BMap.Marker(point[i],{icon:yIcon});
                                        
                                    }
                                    
                                    
                                   
                                          var content='<input onclick="on()" type="button" value="导航">' + markerArr[i].title;
                          
                                        
                                          var infoWindow = new BMap.InfoWindow(content,opts);
                                                marker[i].addEventListener("click", function () {
                                                    this.openInfoWindow(infoWindow);
                                                }); 

                                    map.addOverlay(marker[i]);



                                    }

                              }



 
//异步调用百度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>  
</body>  
</html>

九日九日1659 天前1228

全部回覆(5)我來回復

  • 九日

    九日2020-05-18 14:17:24

    <!doctype html><head> <元字元集=“UTF-8”> <meta http-equiv="X-UA-Compatible" content="ie=edge"> 百度_地圖 <腳本類型=“text/javascript”src=“https://api.map.baidu.com/api?type=webgl&v=1.0&ak=”></script> <樣式類型=“text/css”> body, html,#allmap {width: 100%;height: 100%;overflow:hidden;margin:0;font-family:"微軟雅黑";}   ;

    ;</body><script language="JavaScript">   var markerArr = [      {         title: "姓名:北京超市(總部)",    point    title: "姓名:北京超市(總部)",    point    title: "姓名:北京超市(總部)",    point   ress: "北京市海淀區雙" ,         tel: "010-88888888",         yetai:"Y"      },      {  … 遠1637,39.973424",         address: "北京市海淀區北三環西路雙榆樹西里7號",         tel: "010-62640346",         yetai:"A"      },     point : "1​​16.324596,39.986931",         address: "海淀區中關村南路77號",         tel: "010-62551377",         yetai:"B"      },   產   yetai:"B"      },   超市  {   新超市 魏 鎟point: "116.326296,39.960478",         address: "地址:北京市海淀區魏公村街1號2號樓底商臨01",         tel: "010-88570042",         yeta         point: " 116.33458,39.951854",         address: "地址:北京市海淀區中國氣象局社區南區22號樓底商",              {         title: "名稱:超市發(上地店)",         point: "116.318805,40.03683",         address: "地址:上地資訊路19-3號"      },      {         title: "名稱:超市發(xxxx店)",         point: "116.318805,40.03620",         address: "北京市海淀區北三環西路號",       address: "北京市海淀區北三環西路號",       address: "北京市海淀區北三環西路號",       address: "北京市海淀區北三環西路號",       10 :"A"      },   ];   map_init();   function map_init() {      // GL版命名空間為BMapGL      // 按住滑鼠右鍵,傾斜角和角度角度與角度為map.centerAndZoom(new BMapGL.Point(116.333405,39.974042), 13);  // 初始化地圖,設定中心點座標與地圖等級     map.enableScrollWheelZoom(true); 開啟及尺寸       var zIcon = new BMapGL.Icon('images/z.png',new BMapGL.Size(30,30));   //超市發放總部辦公大樓       var aIcon = new BMapGLGL.Iconf. ',new BMapGL.Size(30,30));   //綜合超市       var bIcon = new BMapGL.Icon('images/b.png',new BMapGL.Size(30,30));   //食品超市  = new BMapGL.Icon('images/c.png',new BMapGL.Size(30,30));   //生活超市       var dIcon = new BMapGL.Icon('images/d.png',new BMapGL.Size( 30,30));   //生鮮超市       var eIcon = new BMapGL.Icon('images/e.png',new BMapGL.Size(30,30));   //社區超市'images/f.png',new BMapGL.Size(30,30));   //外阜店       var lIcon = new BMapGL.Icon('images/l.png',new BMapGL.Size(30,30)) ;   //超市發羅森***        var hIcon = new BMapGL.Icon('images/h.png',new BMapGL.Size(30,30));   //合作店      var gIcon = new BMap.Icon //合作店 var gIcon = new' images/g.png',new BMapGL.Size(30,30));   //菜***        var iIcon = new BMapGL.Icon('images/i.png',new BMapGL.Size(30,30)) ;   //緊急物資       //存放經緯度數組       var point = new Array();        //存放標註點數群組var info = new Array();        //設定允許訊息視窗發送訊息       var opts = {height:100,width:200};        //循環輸出markerArr數組內數組       for (var i = 0;i<markerArr.length;i ){           var p0 = markerA 150); var p1 = markerArr[ i].point.split(',')[1];            // console.log(windowinfo);            point[i] = new window.BMapGL.Point(p0,p1)  point[i] = new window.BMapGL.Point(p0,p1)  point[i] = new window.BMapGL.Point(p0,p1);  ;            marker[i] = new window.BMapGL.Marker(point[i]);            // console.log(marker[ itch (markerArr[i].yetai) { case "A":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:aIcon});   case "B":                    marker[i] = new window.BMapGL.Marker(point[ i],{icon:bIcon});                    break;                case "C": 我[i],{icon:cIcon});                    break;                case "D i] = new window.BMapGL.Marker(point[i],{icon:dIcon});                    break;         [i] = new window.BMapGL.Marker(point[i],{icon:eIcon });                    break;                case "f":    一天con});                    break;                case "l":      .Marker(point[i],{icon:lIcon});休息; case "h":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:hIcon});休息; case "g":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:gIcon});休息; case "i":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:iIcon});休息;預設值:                    marker[i] = new window.BMapGL.Marker(point[i],{icon:zIcon}); }            marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫            var content=markerArr[i].title; var infoWindow = new BMapGL.InfoWindow(content,opts); marker[i].addEventListener("click",                (function (k) {                                                       //map.centerAndZoom(point[ k], 18);               . info[k]);                        console.log(marker);            與            }                })(i)           ); map.addOverlay(標記[i]); }   }函數 info_window() {}</script></html>

    回覆
    0
  • Storms

    Storms2020-05-14 11:24:57

    不管點擊哪一個標註,都是輸出最後一條的訊息。這主要是作用域的問題。

    用閉包解決:

    var createMark = function(lng, lat, info_html) {

     var _marker = new BMap.Marker(new BMap.Point(lng, lat));

     _marker.addEventListener("click", function(e) {

     this.openInfoWindow(new BMap.InfoWindow(info_html));

     }) ;

     _marker.addEventListener("mouseover", function(e) { this.setTitle("位於: " lng "," lat);

     });

    # return _marker;

    將經緯度,和顯示訊息單獨放在函數裡,new標註之後,立刻加監聽。

    回覆
    0
  • 九日

    剛接觸沒整明白,麻煩幫忙源碼修改一下,謝謝

    九日 · 2020-05-18 14:15:31
  • 九日

    九日2020-05-14 10:04:12

    請大神指教,沒人知道嗎?

    回覆
    0
  • 九日

    九日2020-05-13 16:15:16

    求大神指點,小弟感激不盡,謝謝

    回覆
    0
  • 取消回覆