1. 地图组件 - map
通过在小程序页面的 WXML 文件中使用 map 组件，可以在小程序中嵌入地图：
<map id="myMap" latitude="39.904690" longitude="116.407170" scale="14" style="width: 100%; height: 300px;"></map>
上述代码中的参数说明如下：
- id: 组件的唯一标识符。
- latitude、longitude: 地图的中心位置坐标。
- scale: 地图缩放级别。
- style: 地图的宽度和高度。
2. 地图上下文 - wx.createMapContext
通过 wx.createMapContext 方法可以获取地图上下文，用于控制地图的操作：
const mapContext = wx.createMapContext('myMap');
mapContext.moveToLocation(); // 移动到当前定位点
mapContext.getCenterLocation({
success: function (res) {
console.log('地图中心坐标', res.latitude, res.longitude);
}
});
3. 定位 API - wx.getLocation
通过 wx.getLocation 方法可以获取用户的地理位置信息：
wx.getLocation({
type: 'gcj02',
success: function (res) {
const latitude = res.latitude;
const longitude = res.longitude;
console.log('用户当前位置', latitude, longitude);
}
});
4. 标记点 - markers
在地图上添加标记点，用于标识特定位置：
Page({
data: {
markers: [{
id: 1,
latitude: 39.904690,
longitude: 116.407170,
title: '北京',
iconPath: '/images/location.png'
}]
}
});
上述代码中的参数说明如下：
- id: 标记点的唯一标识符。
- latitude、longitude: 标记点的坐标。
- title: 标记点的标题。
- iconPath: 标记点的图标路径。
5. 路线规划 - wx.openLocation
通过 wx.openLocation 方法可以打开地图选择位置，并显示路线规划：
wx.openLocation({
latitude: 39.904690,
longitude: 116.407170,
name: '北京',
address: '北京市'
});
上述代码中的参数说明如下：
- latitude、longitude: 目标位置的坐标。
- name: 目标位置的名称。
- address: 目标位置的详细地址。
以上是一些微信小程序中常用的地图 API 示例。在实际应用中，你可能还需要考虑地图事件、地图样式的定制、定位权限的处理等。详细的 API 使用方法和参数配置可以查阅[微信小程序官方文档 - 地图](https://developers.weixin.qq.com/miniprogram/dev/component/map.html)。
转载请注明出处：http://www.zyzy.cn/article/detail/843/微信小程序