1. 显示地图：
<map latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" bindmarkertap="markerTap" style="width: 100%; height: 300px;"></map>
在上面的示例中，latitude 和 longitude 属性用于设置地图中心点的纬度和经度，markers 属性用于设置标记点的信息。bindmarkertap 事件用于监听标记点被点击的事件。
2. 设置标记点：
Page({
data: {
latitude: 23.099994,
longitude: 113.324520,
markers: [{
id: 1,
latitude: 23.099994,
longitude: 113.324520,
title: '标记点',
iconPath: '/images/marker.png',
width: 30,
height: 30,
}],
},
markerTap: function (e) {
console.log('标记点被点击', e.markerId);
},
});
在上面的示例中，通过在 data 中设置 markers 数组，可以在地图上显示一个标记点。你可以设置标记点的经纬度、标题、图标路径等信息。
3. 地图控件：
<map controls="{{controls}}" style="width: 100%; height: 300px;"></map>
在上面的示例中，通过 controls 属性设置地图控件，可以在地图上显示一些控件，如缩放按钮、定位按钮等。
Page({
data: {
controls: [{
id: 1,
iconPath: '/images/location.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50,
},
clickable: true,
}],
},
});
在上面的示例中，通过在 data 中设置 controls 数组，可以在地图上显示一个控件。这里设置了一个定位按钮，点击后可以回到当前位置。
4. 监听地图事件：
<map bindregionchange="regionChange" style="width: 100%; height: 300px;"></map>
在上面的示例中，通过 bindregionchange 事件可以监听地图的区域变化事件。
Page({
regionChange: function (e) {
console.log('地图区域变化', e.type);
},
});
这是一个基本的地图组件的使用示例。你可以根据实际需求，设置不同的属性、事件来满足你的业务需求。另外，需要在小程序的设置中开启地图服务，并获得对应的 API 密钥。详细的使用方法和配置可以查阅微信小程序官方文档中的[地图组件](https://developers.weixin.qq.com/miniprogram/dev/component/map.html)。
转载请注明出处：http://www.zyzy.cn/article/detail/823/微信小程序