首页 >社区问答列表 >javascript 开发百度地图

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>

  • 九日
  • 九日    2020-05-18 14:17:244楼

    <!doctype html><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>BaiDu_Map</title>   <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak="></script>   <style type="text/css">      body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}   </style></head><body><div id="allmap"></div></body><script language="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"      },   ];   map_init();   function map_init() {      // GL版命名空间为BMapGL      // 按住鼠标右键,修改倾斜角和角度      var map = new BMapGL.Map("allmap");    // 创建Map实例      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 BMapGL.Icon('images/a.png',new BMapGL.Size(30,30));   //综合超市        var bIcon = new BMapGL.Icon('images/b.png',new BMapGL.Size(30,30));   //食品超市        var cIcon = 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));   //社区超市        var fIcon = new BMapGL.Icon('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 BMapGL.Icon('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 marker = new Array();        //存放提示信息窗口对象数组        var info = new Array();        //设置允许信息窗发送消息        var opts = {height:100,width:200};        //循环输出markerArr数组内数组        for (var i = 0;i<markerArr.length;i++){            var p0 = markerArr[i].point.split(',')[0];            var p1 = markerArr[i].point.split(',')[1];            // console.log(windowinfo);            point[i] = new window.BMapGL.Point(p0,p1);            console.log(point[i]);            marker[i] = new window.BMapGL.Marker(point[i]);            // console.log(marker[i]);            //通过业态判断显示标注点图片            switch (markerArr[i].yetai) {                case "A":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:aIcon});                    break;                case "B":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:bIcon});                    break;                case "C":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:cIcon});                    break;                case "D":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:dIcon});                    break;                case "E":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:eIcon});                    break;                case "f":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:fIcon});                    break;                case "l":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:lIcon});                    break;                case "h":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:hIcon});                    break;                case "g":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:gIcon});                    break;                case "i":                    marker[i] = new window.BMapGL.Marker(point[i],{icon:iIcon});                    break;                default:                    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) {                    // js 闭包                    return function () {                        //map.centerAndZoom(point[k], 18);                        //marker[k].openInfoWindow(info[k]);                        console.log(marker);                        this.openInfoWindow(infoWindow, marker[i]); //开启信息窗口                    }                })(i)            );            map.addOverlay(marker[i]);        }   }function info_window() {}</script></html>

    +0添加回复

  • 回复
  • Storms
  • Storms    2020-05-14 11:24:573楼

    不管点击哪一个标注,都是输出最后一条的信息。这主要是作用域的问题。

    用闭包解决:

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