如何在导入经纬度文档后自动生成坐标点

Question

遇到一个问题：使用百度地图API时，如何能够通过上传一个有很多地理坐标点的文件后通过js自动在地图上生成相应的多个坐标点并当点击坐标点的时候可以显示对应的坐标点的信息？

Answer 1

您可以按照以下步骤通过百度地图API，在网页中生成多个地理坐标点，并且实现点击坐标点后显示对应信息的功能：

1. 准备地理坐标点的数据文件。您可以将坐标点数据以JSON格式存储在一个文件中。文件格式如下：

[
    {
        "lat": 39.915,
        "lng": 116.404,
        "name": "地点1",
        "address": "北京市东城区长安街天安门广场"
    },
    {
        "lat": 39.914,
        "lng": 116.406,
        "name": "地点2",
        "address": "北京市东城区故宫博物院"
    },
    ...
]

其中，每个坐标点包括经度、纬度、名称和地址四个字段。

1. 在网页中引入百度地图API。在网页的head标签中添加以下代码：

<script src="http://api.map.baidu.com/api?v=2.0&ak=您的AK"></script>

其中，您的AK需要替换为您在百度地图API控制台中申请的API Key。

1. 在网页中创建地图容器。在网页的body标签中添加一个div元素作为地图容器：

<div id="map" style="width: 100%; height: 600px"></div>

1. 在JS中加载地理坐标数据并生成坐标点。在JS中添加以下代码：

var map = new BMap.Map("map"); // 创建地图实例
var pointArr = []; // 存储所有的点
var infoWindowArr = []; // 存储所有的信息窗口
var url = "坐标数据文件的URL";
$.getJSON(url, function(data) { // 加载坐标数据
    $.each(data, function(i, item) { // 遍历每个坐标点
        var point = new BMap.Point(item.lng, item.lat); // 创建点坐标
        var marker = new BMap.Marker(point); // 创建标注
        var infoWindow = new BMap.InfoWindow(item.name + "<br>" + item.address); // 创建信息窗口
        map.addOverlay(marker); // 添加标注
        map.addOverlay(infoWindow); // 添加信息窗口
        pointArr.push(point); // 存储点坐标
        infoWindowArr.push(infoWindow); // 存储信息窗口
        marker.addEventListener("click", function() { // 添加点击事件
            infoWindow.open(marker);
        });
    });
    map.setViewport(pointArr); // 调整视野
});

其中，坐标数据文件的URL需要替换为存储地理坐标数据文件的URL地址。

1. 运行程序。将HTML文件运行在浏览器中，地图容器将会显示多个坐标点，并且点击每个坐标点后会弹出对应的信息窗口。