javascript 开发百度地图
九日
九日 2020-05-13 14:03:06
[JavaScript讨论组]

javascript 开发百度地图

1、完成内容,按照不同业态类型(A,B,C,D,E),标注不同图标(完成)

2、点击标注点分别弹出markerArr数组内的title,yetai等内容目前可以弹出标注点内容,但是永远都是markerArr数组内的最后一条数据,请问应该怎样才可以点击标注点后弹出对应的标注点数组信息。

求大神指点,感激不尽,谢谢。

  

  
  
  
Hello, World  
  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#allmap{height:100%}  
  

//v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"


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

九日
九日

全部回复(3)
Storms

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

用闭包解决:

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

  • 回复 刚刚接触没整明白,麻烦帮忙源码修改一下,谢谢
    九日 作者 2020-05-18 14:15:31
九日

请大神指教,没人知道吗?

九日

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号