显示基本地图：
<map
latitude="{{latitude}}"
longitude="{{longitude}}"
scale="{{scale}}"
markers="{{markers}}"
bindmarkertap="markerTap"
style="width: 100%; height: 300px;"
></map>
在上面的示例中：
- latitude 和 longitude 分别用于设置地图的中心点经度和纬度。
- scale 用于设置地图的缩放级别。
- markers 用于设置标记点的信息，可以在地图上显示标记点。
- bindmarkertap 事件用于监听标记点被点击的事件。
- style 用于设置地图的宽度和高度。
设置标记点：
Page({
data: {
latitude: 23.099994,
longitude: 113.324520,
scale: 16,
markers: [{
id: 1,
latitude: 23.099994,
longitude: 113.324520,
title: '标记点',
iconPath: '/images/marker.png',
width: 30,
height: 30,
callout: {
content: '我是标记点的气泡',
color: '#ff0000',
fontSize: 14,
borderRadius: 5,
borderWidth: 1,
borderColor: '#000000',
bgColor: '#ffffff',
padding: 10,
display: 'ALWAYS',
},
}],
},
markerTap: function (e) {
console.log('标记点被点击', e.markerId);
},
});
在上面的示例中，通过 markers 数组设置标记点的信息。其中，callout 属性用于设置标记点的气泡，可以显示一些额外的信息。
控制地图缩放：
<slider value="{{scale}}" min="5" max="20" bindchange="sliderChange"></slider>
Page({
data: {
scale: 16,
},
sliderChange: function (e) {
this.setData({
scale: e.detail.value,
});
},
});
在上面的示例中，使用 slider 组件用于控制地图的缩放级别。通过 bindchange 事件监听滑动条的变化，然后设置 scale 属性。
监听地图事件：
<map bindregionchange="regionChange" style="width: 100%; height: 300px;"></map>
Page({
regionChange: function (e) {
console.log('地图区域变化', e.type);
},
});
在上面的示例中，通过 bindregionchange 事件监听地图的区域变化事件。
这是一个基本的 map 组件的使用示例。你可以根据实际需求，设置不同的属性和事件，以满足你的业务需求。详细的属性和事件列表可以查阅微信小程序官方文档中的[地图组件](https://developers.weixin.qq.com/miniprogram/dev/component/map.html)。
转载请注明出处：http://www.zyzy.cn/article/detail/824/微信小程序