百度地图API中marker循环添加InfoWindow显示出相同内容的问题?
2017-11-06 15:35 浏览(2416 更新于 2017-11-06 16:37

自己做的记账app,已经记了不少数据,包含有地理位置。

最近就想着,在后台查看统计的时候,用百度地图显示出来,这样就能直观的看见自己一天(或一个月)的位置(虽然多是三点一线的生活,o(︶︿︶)o )。

上代码:

php数据

$recordArr = [
    [
        'address' => '地址1',
        'longitude' => 106.565828,
        'latitude' => 29.541019,
        'tags' => '<span>标签1</span><span>标签2</span><span>标签8</span>',
        'content' => '备注1',
        'time' => '2017-08-03 13:01:34'
    ],
    [
        'address' => '地址二',
        'longitude' => 106.56175,
        'latitude' => 29.467412,
        'tags' => '<span>标签9</span><span>标签6</span><span>标签3</span>',
        'content' => '备注2',
        'time' => '2017-08-08 13:01:34'
    ]
];
$jsonData = json_encode($recordArr);

js代码

var map = new BMap.Map("map");
var marker = [];//marker数组
var info = []; //弹窗信息数组
var tmpData,html='',tmpPoint;
for (var k in recordData) {
    tmpData = recordData[k];
    var lng = tmpData['longitude'];
    var lat = tmpData['latitude'];
    tmpPoint = new BMap.Point(lng, lat);//标注点
    marker[k] = new BMap.Marker(tmpPoint); //生成标记
    map.addOverlay(marker[k]);

    html = "<div class='bd-dialog'><table>";
    html += "<tr><td style='width:50px'>地址:</td><td>" + tmpData['address'] + "</td></tr>";
    html += "<tr><td style='width:50px'>标签:</td><td>" + tmpData['tags'] + "</td></tr>";
    html += "<tr><td style='width:50px'>备注:</td><td>" + tmpData['content'] + "</td></tr>";
    html += "<tr><td style='width:50px'>时间:</td><td>" + tmpData['time'] + "</td></tr>";
    html += "</table></div>";
    info[k] = new BMap.InfoWindow(html);//创建弹窗
    marker[k].addEventListener("click", function () {
        this.openInfoWindow(info[k]);
    });
}

好像没什么问题,点击标注点查看信息,发现都是一样的,都是最后一个标注点的信息。

在创建监听的时候,使用闭包即可解决这个问题

info[k] = new BMap.InfoWindow(html);//创建弹窗
(function(k){
    marker[k].addEventListener("click",function(){
        this.openInfoWindow(info[k]);
    });
})(k);

看看效果吧

嗯,上个月都在这些地方活跃,哈哈

评论(0)
发布评论
回复X
聊天室(0