小程序高德地图markers两点展示
时间: 2023-11-16 09:05:58 浏览: 139
高德地图显示程序
可以通过高德地图API的Markers(标记点)来实现两点展示。以下是基本的代码示例:
1. 在wxml文件中添加高德地图组件:
```
<view class="map">
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" style="width: 100%; height: 100%;"></map>
</view>
```
2. 在js文件中初始化地图组件和markers:
```
Page({
data: {
latitude: 39.90469, // 维度
longitude: 116.40717, // 经度
markers: [{
iconPath: "/images/start.png", // 起点图标
id: 0,
latitude: 39.90469,
longitude: 116.40717,
width: 50,
height: 50
}, {
iconPath: "/images/end.png", // 终点图标
id: 1,
latitude: 39.91545,
longitude: 116.40670,
width: 50,
height: 50
}]
},
onLoad: function() {
// 初始化地图组件
this.mapCtx = wx.createMapContext('map');
}
})
```
3. 在wxss文件中设置地图的样式:
```
.map {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
```
在上述示例中,我们创建了两个markers,分别代表起点和终点,同时设置了它们的经纬度、图标路径、图标大小等属性。然后在wxml文件中使用高德地图组件来展示markers,并将markers绑定到组件的markers属性上。最后在js文件中初始化地图组件和markers,并在wxss文件中设置地图的样式。
当我们运行这个小程序时,就可以在地图上看到两个markers,分别代表了起点和终点。
阅读全文