微信小程序 地图map详解及简单实例

1、什么是微信小程序地图map？

微信小程序地图map是基于腾讯地图API的一种小程序地图组件，它提供了开放的API和SDK，可以用于开发各种小程序地图应用。其中，API主要是腾讯地图提供的一些接口和服务，如地理编码、逆地理编码、获取位置等功能，SDK则是腾讯地图提供的一些地图组件，如地图、标注、路线规划等组件。与其他地图API相比，微信小程序地图具有以下几个特点：

支持高清地图展示。

支持各种类型的交通模式。

支持多种地图展示模式。

支持各种类型的标注和图层。

提供了多种途径获取地理位置。

2、微信小程序地图map的使用方法？

2.1、获取地理位置

使用微信小程序地图map前，我们需要先获取用户的地理位置信息，这可以通过微信小程序API提供的wx.getLocation()接口来实现，代码如下：

wx.getLocation({
    type: 'wgs84',
    success: function (res) {
        var latitude = res.latitude // 纬度
        var longitude = res.longitude // 经度
        var speed = res.speed // 速度
        var accuracy = res.accuracy // 精度
    }
})

其中type是请求的坐标类型，success是获取成功的回调函数，res就是获取的结果，其中包括了地理位置的经纬度、速度和精度等信息。

2.2、展示地图

在成功获取用户地理位置信息后，我们就可以使用微信小程序地图map来展示地图了，使用方法也很简单，直接在wxml文件中加入map组件即可，代码如下：

<!-- 微信小程序地图 -->
<map id="map" 
    latitude="{{latitude}}" 
    longitude="{{longitude}}" 
    scale="{{scale}}" 
    markers="{{markers}}" 
    polyline="{{polyline}}" 
    show-location="{{true}}" 
    bindmarkertap="onMarkerTap" 
    bindregionchange="onRegionChange"
></map>

其中latitude和longitude是地图的中心点坐标，scale是缩放比例，markers和polyline分别是标注和路径信息，bindmarkertap和bindregionchange是地图点击事件的回调函数。

2.3、标注和路径规划

除了展示地图外，微信小程序地图map还支持多个标注和路径规划功能，通过调用API的方式来实现。代码示例如下：

// 标注
wx.getLocation({
    type: 'gcj02',
    success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        wx.openLocation({
            latitude: latitude,
            longitude: longitude,
            scale: 28
        })
    }
})
// 路径规划
wx.request({
    url: 'https://apis.map.qq.com/ws/direction/v1/driving/',
    data: {
        from: '39.989895,116.433085',
        to: '39.983171,116.467149',
        output: 'json',
        key: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
    },
    success: function (res) {
        console.log(res.data)
    }
})

通过以上API，我们可以实现在地图上标注一个地点或者规划两个地点之间的路径。

2.4、地图事件

最后，微信小程序地图map还支持多种事件，如地图点击事件、标注点击事件、地图移动事件等，在map组件中直接添加相应的回调函数即可，代码示例如下：

<map 
    id="map" 
    bindtap="onMapTap" 
    bindmarkertap="onMarkerTap" 
    bindcallouttap="onCallouttap" 
    bindcontroltap="onControltap" 
    bindregionchange="onRegionchange" 
    longitude="{{longitude}}" 
    latitude="{{latitude}}" 
    >
</map>

以上就是微信小程序地图map的基本使用方法和功能，我们可以根据实际需要进行相应的开发和调用。