HTML如何使用JSON数据在百度地图API中加载自定义Marker图标

在使用HTML读取JSON数据并加载到百度地图API中时,可以通过加载JSON文件内的坐标和信息来显示Marker图标。以下是完整步骤:

1. 读取JSON数据

使用JavaScript的fetch()方法读取本地或远程JSON文件。

javascript

fetch('data.json')

.then(response => response.json())

.then(data => {

// 处理数据

});

2. 初始化百度地图

使用百度地图API初始化地图,确定中心点和缩放比例。

javascript

var map = new BMap.Map('container');

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

3. 加载Marker图标

遍历JSON数据,将坐标点加载为Marker图标,并使用自定义图标来区分不同标记点。

javascript

data.forEach(point => {

var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat), {

icon: new BMap.Icon('icon.png', new BMap.Size(50, 50))

});

map.addOverlay(marker);

});

4. 显示标记信息

可以为每个Marker图标添加点击事件,显示其对应的信息。

通过以上步骤,可以轻松实现百度地图API与JSON数据的对接,加载自定义的Marker图标

html 文件大小:2.52KB