自己做的记账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);

看看效果吧

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