用js+web编写一个程序在手机或电脑上运行, 通过访问以下url , 将获取到一组点坐标的经纬度: http://emojikeyboard.cn:8080/v2/gaode/list 一个点的坐标数据格式如下: { "longitude":"113.51299368367913", //经度 "latitude":"22.28335787192102" //纬度 }, 要求: 1. 请为每一个点在高德地图中加一个标记 2. 并为每一个点的标记按先后顺序加个数字,如第一个点就在标记中心显示 数字 https://www.emojikeyboard.cn/dji/flagdemo.png 3. 将这些点按前后点顺序在高德地图中连接成线,可以看到一个简单的图形. 4. 点标记的图可以用如下 https://www.emojikeyboard.cn/dji/flag.webp 请将结果截图,并将代码发送过来。 提示: 1. 可以查阅高德地图 js 文档,请先通过 js 方式引入高德地图
时间: 2023-03-29 19:01:03 浏览: 152
好的,我可以回答这个问题。您可以使用高德地图 JavaScript API 来实现这个程序。首先,您需要使用 AJAX 请求获取到点坐标的经纬度数据,然后使用高德地图 API 在地图上添加标记和连接线。以下是示例代码:
```javascript
// AJAX 请求获取点坐标数据
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://emojikeyboard.cn:808/v2/gaode/list');
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 初始化地图
var map = new AMap.Map('map-container', {
zoom: 10,
center: [data[].longitude, data[].latitude]
});
// 添加标记和连接线
var markers = [];
for (var i = ; i < data.length; i++) {
var marker = new AMap.Marker({
position: [data[i].longitude, data[i].latitude],
map: map,
icon: 'https://www.emojikeyboard.cn/dji/flag.webp',
offset: new AMap.Pixel(-15, -30),
label: {
content: i + 1,
offset: new AMap.Pixel(, -20)
}
});
markers.push(marker);
if (i > ) {
var polyline = new AMap.Polyline({
path: [[data[i - 1].longitude, data[i - 1].latitude], [data[i].longitude, data[i].latitude]],
map: map,
strokeColor: '#3366FF',
strokeWeight: 5
});
}
}
// 自适应地图视野
map.setFitView();
}
};
xhr.send();
```
您需要将上述代码保存为一个 HTML 文件,并在其中引入高德地图 JavaScript API 的库文件。然后,您需要在 HTML 文件中添加一个 id 为 `map-container` 的元素作为地图容器。最后,您可以在浏览器中打开该 HTML 文件,即可看到地图上的标记和连接线。
阅读全文