首页 >社区问答列表 >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, minim