用js+web编写一个程序在手机或电脑上运行, 通过访问以下url , 将获取到一组点坐标的经纬度: http://emojikeyboard.cn:8080/v2/gaode/list 一个点的坐标数据格式如下: { "longitude":"113.51299368367913", //经度 "latitude":"22.28335787192102" //纬度 }, 要求: 1. 请为每一个点在高德地图中加一个标记 2. 并为每一个点的标记按先后顺序加个数字,如第一个点就在标记中心显示 数字 1. 如 https://www.emojikeyboard.cn/dji/flagdemo.png 3. 将这些点按前后点顺序在高德地图中连接成线,可以看到一个简单的图形. 请将结果截图,并将代码发送过来。 提示: 1. 可以查阅高德地图 js 文档,请先通过 js 方式引入高德地图 2. 点标记的图可以用如下,也可以自己找标记图. https://www.emojikeyboard.cn/dji/flag.webp
时间: 2023-03-29 10:00:57 浏览: 280
好的,这是一个关于使用 JavaScript 编写程序在手机或电脑上访问 URL 并在高德地图中标记点和连接线的问题。我可以回答这个问题。
首先,我们需要在 HTML 中引入高德地图的 JavaScript 库,然后使用 AJAX 技术访问给定的 URL,获取点的经纬度数据。接着,我们可以使用高德地图的 API,在地图上添加点标记和连接线,并按照顺序为每个点标记添加数字。
以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高德地图示例</title>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="map" style="height: 500px;"></div>
<script>
var map = new AMap.Map('map', {
zoom: 10,
center: [113.51299368367913, 22.28335787192102]
});
$.ajax({
url: 'http://emojikeyboard.cn:808/v2/gaode/list',
type: 'GET',
dataType: 'json',
success: function(data) {
var points = [];
for (var i = ; i < data.length; i++) {
var point = new AMap.Marker({
position: [data[i].longitude, data[i].latitude],
map: map,
label: {
content: i + 1,
offset: new AMap.Pixel(, -20)
}
});
points.push([data[i].longitude, data[i].latitude]);
}
var polyline = new AMap.Polyline({
path: points,
strokeColor: '#3366FF',
strokeWeight: 5,
strokeOpacity: .8
});
map.add(polyline);
},
error: function(xhr, status, error) {
console.log('Error:', error);
}
});
</script>
</body>
</html>
```
请注意,这里的 `YOUR_KEY` 需要替换为你自己的高德地图 API Key。此外,为了演示方便,这里使用了 jQuery 库来进行 AJAX 请求。
最后,我们可以将结果截图并发送给您。
阅读全文