微信小程序 地图

微信小程序可以使用map组件来显示地图。map组件文档详见：https://developers.weixin.qq.com/miniprogram/dev/component/map.html。

<!--wxml页面放置一个组件-->
<view class="container">
			<map
				class="map"
				id="my"
        style="width:100%;height:380px;"
				latitude="{{location.latitude}}"
				longitude="{{location.longitude}}"
				show-location="true"
				show-scale="true"
				scale="16"
			>
			</map>
</view>

//js页面放置代码，data来存放页面加载时候的当地经纬度。
  data: {
    location: {
      latitude: 40.040415,
      longitude: 116.273511
    },
  },
  onLoad: function () {
    //获取当前的地理位置、速度。文档见：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        const { latitude, longitude } = res;
        console.log(latitude);
        console.log(longitude);
        this.setData({
          location: {
            latitude,
            longitude
          }
        });
      }
    });    
  },

显示效果如下：

cover-view，文档介绍如下：

覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。