Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
JavaScript-Entwicklung der Baidu-Karte
九日
九日 2020-05-13 14:03:06
0
5
1219

Javascript-Entwicklungs-Baidu-Karte

1. Vervollständigen Sie den Inhalt und markieren Sie verschiedene Symbole entsprechend den verschiedenen Geschäftstypen (A, B, C, D, E) (abgeschlossen)

2 markerArr-Array bzw. Yetai Derzeit kann der Inhalt des Markierungspunkts angezeigt werden, es handelt sich jedoch immer um das letzte Datenelement im Array markerArr. Wie kann ich die entsprechenden Informationen zum Markierungspunkt-Array anzeigen, nachdem ich auf einen Markierungspunkt geklickt habe?

Bitte geben Sie mir einen Rat, ich wäre Ihnen sehr dankbar, danke. 

<!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>

九日
九日

Antworte allen(4)
九日
九日2020-05-18 14:17:24 4 Etage

<!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>

Wie +0
Antwort hinzufügen
Storms
Storms2020-05-14 11:24:57 3 Etage

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

用闭包解决：

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标注之后，立刻加监听。

Wie +0
Antwort hinzufügen
  • Antwort 刚刚接触没整明白，麻烦帮忙源码修改一下，谢谢
    九日 Autor 2020-05-18 14:15:31
九日
九日2020-05-14 10:04:12 2 Etage

请大神指教，没人知道吗？

Wie +0
Antwort hinzufügen
九日
九日2020-05-13 16:15:16 1 Etage

求大神指点，小弟感激不尽，谢谢

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage