遇到一个问题:使用百度地图API时,如何能够通过上传一个有很多地理坐标点的文件后通过js自动在地图上生成相应的多个坐标点并当点击坐标点的时候可以显示对应的坐标点的信息?
您可以按照以下步骤通过百度地图API,在网页中生成多个地理坐标点,并且实现点击坐标点后显示对应信息的功能:
[
{
"lat": 39.915,
"lng": 116.404,
"name": "地点1",
"address": "北京市东城区长安街天安门广场"
},
{
"lat": 39.914,
"lng": 116.406,
"name": "地点2",
"address": "北京市东城区故宫博物院"
},
...
]
其中,每个坐标点包括经度、纬度、名称和地址四个字段。
head
标签中添加以下代码:<script src="http://api.map.baidu.com/api?v=2.0&ak=您的AK"></script>
其中,您的AK
需要替换为您在百度地图API控制台中申请的API Key。
body
标签中添加一个div
元素作为地图容器:<div id="map" style="width: 100%; height: 600px"></div>
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地址。