只用一个marker 替换 高德_高德地图设置多个圆点,只有最后一个生效circleMarker.setOptions...
时间: 2023-11-27 10:53:50 浏览: 39
你可以尝试使用循环来为每个圆点设置选项,而不是仅在最后一个圆点上设置选项。例如:
```
for (var i = 0; i < coordinates.length; i++) {
var circleMarker = new AMap.CircleMarker({
center: coordinates[i],
radius: 10,
strokeColor: "#F33",
strokeWeight: 3,
strokeOpacity: 1,
fillColor: "#ee2200",
fillOpacity: 0.35
});
circleMarker.setMap(map);
// 在这里设置选项
circleMarker.setOptions({
cursor: "pointer",
zIndex: 10
});
}
```
在这个例子中,我们使用一个循环来为每个圆点创建一个新的 `CircleMarker` 对象,并将它们添加到地图上。然后,我们在循环内部使用 `setOptions` 方法为每个圆点设置选项。这样,每个圆点都会有自己的选项,而不仅仅是最后一个圆点。
相关问题
marker_msg.pose.position是左上角第一个点的位置么
不是,`marker_msg.pose.position`是`Marker`消息中心点的位置。如果要绘制一个方形区域,可以通过计算左上角点的位置和长宽来设置`Marker`消息的位置和大小。假设左上角点的位置为`(x,y)`,长为`length`,宽为`width`,则可以按照以下方式设置`Marker`消息的位置和大小:
```python
marker_msg.pose.position.x = x + length/2
marker_msg.pose.position.y = y - width/2
marker_msg.pose.position.z = 0.0
marker_msg.scale.x = length
marker_msg.scale.y = width
marker_msg.scale.z = 0.01 # 设置高度为0.01,表示绘制一个平面方形
```
在这个例子中,我们将`Marker`消息的中心点设置为左上角点的位置加上长宽的一半,这样就可以让方形区域的中心点与左上角点重合。同时,我们将`Marker`消息的大小设置为长宽,同时将高度设置为0.01,表示绘制一个平面方形。
vue.js 高德地图显示两个地点
您可以使用 Vue.js 和高德地图 JavaScript API 来显示两个地点。首先,需要在 HTML 文件中引入高德地图的 JavaScript API,然后在 Vue 组件中编写代码来实现地图显示。
以下是一个简单的示例:
在 HTML 文件中引入高德地图的 JavaScript API:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js 高德地图示例</title>
<!-- 引入高德地图的 JavaScript API -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=your_amap_api_key"></script>
</head>
<body>
<div id="app">
<div id="map"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
```
在 app.js 文件中编写 Vue 组件的代码:
```javascript
new Vue({
el: '#app',
mounted() {
// 在组件挂载后初始化地图
this.initMap();
},
methods: {
initMap() {
// 创建地图实例
const map = new AMap.Map('map', {
zoom: 10, // 设置地图缩放级别
center: [lng, lat] // 设置地图中心点坐标
});
// 添加标记点
const marker1 = new AMap.Marker({
position: [lng1, lat1], // 设置标记点坐标
map: map
});
const marker2 = new AMap.Marker({
position: [lng2, lat2], // 设置标记点坐标
map: map
});
}
}
});
```
在上面的代码中,您需要将 `your_amap_api_key` 替换为您自己的高德地图 API 密钥。`lng` 和 `lat` 分别表示地点的经度和纬度,您可以根据实际需求替换它们。
请注意,上述代码只是一个简单的示例,您可能还需要进行其他设置和样式调整来满足您的需求。详细的文档和示例可以在高德地图 JavaScript API 官方网站上找到。