google maps V3 给多个marker添加infowindows信息

【熊猫大叔    转载请注明出处:http://blog.csdn.net/pandaflyup

参考:https://developers.google.com/maps/documentation/javascript/events?hl=zh-CN#EventArguments  其中的“在时间侦听器中使用闭包”部分。

问题描述:

在自己的网页中嵌入google map,可以添加多个marker,但是在通过点击操作显示infowindow时,由于添加marker是用的是循环,所以每次都是在最后一个marker上显示infowindow。

问题分析:
刚开始把添加marker和infowindow放在一个函数中去了,没有使用函数功能。结果marker它会认为是一个图标,所以总是显示最后一个,而不是对应每一个。

错误代码(未能达到要求代码)

function initialize() {
        var myLatlng = new google.maps.LatLng(39.9629, 116.3581);
        var myOptions = {
            zoom: 16,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var image=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以在高德地图的Marker对象中添加鼠标事件监听器,来实现鼠标移入显示label详细信息的功能。具体的实现步骤如下: 1. 创建Marker对象时,设置label属性为一个AMap.Text对象,用于显示详细信息。 ```javascript var marker = new AMap.Marker({ position: [lng, lat], label: { content: '详细信息', offset: new AMap.Pixel(0, -20) // 设置label偏移量,使其显示在Marker上方 } }); ``` 2. 给Marker对象添加mouseover和mouseout事件监听器,在鼠标移入和移出时显示或隐藏label。 ```javascript marker.on('mouseover', function (e) { marker.setLabel({ content: '详细信息', offset: new AMap.Pixel(0, -20), visible: true // 显示label }); }); marker.on('mouseout', function (e) { marker.setLabel({ visible: false // 隐藏label }); }); ``` 完整的代码示例: ```javascript var map = new AMap.Map('container', { zoom: 13, center: [116.397428, 39.90923] }); var markers = [ {lnglat: [116.405285, 39.904989], info: '北京市'}, {lnglat: [121.472644, 31.231706], info: '上海市'}, {lnglat: [113.280637, 23.125178], info: '广州市'}, {lnglat: [114.066112, 22.548515], info: '深圳市'} ]; for (var i = 0; i < markers.length; i++) { var marker = new AMap.Marker({ position: markers[i].lnglat, label: { content: markers[i].info, offset: new AMap.Pixel(0, -20) } }); marker.on('mouseover', function (e) { marker.setLabel({ content: e.target.getExtData().info, offset: new AMap.Pixel(0, -20), visible: true }); }); marker.on('mouseout', function (e) { marker.setLabel({ visible: false }); }); marker.setExtData(markers[i]); // 将详细信息存储在Marker对象的扩展数据中 marker.setMap(map); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值