微信小程序地图功能

一，显示地图

 <map id="map" longitude="{
   
   {longitude}}" latitude="{
   
   {latitude}}" scale="14" controls="{
   
   {controls}}" bindcontroltap="controltap" markers="{
   
   {markers}}" 
  bindmarkertap="markertap" polyline="{
   
   {polyline}}" circles="{
   
   {circles}}" bindregionchange="regionchange" show-location style="width:100%;height:350px;">
</map>

二，获取当前位置

在对地图进行控制显示区域大小时，想将地图全屏显示在手机上，使用平时的px或者直接使用百分比对于高度全屏无效，这时候可以通过vh这个单位，整个屏幕默认满屏为100vh，所以将地图的高度设置为100vh，宽度设置为100%即可。

看到这里，经度和纬度都是要获取当前的定位点，这时，就需要用到wx.getLocation（{}），来获取当前所在的经纬度，然后传给视图页。

data: {
    latitude:0,
    longitude:0,
    markers: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 
  var that=this;
  wx.getLocation({
    type:"wgs84",
    success:res=>{
      console.log('纬度',res.latitude)
      console.log('经度',res.longitude)
      that.setData({
        latitude:res.latitude,
        longitude:res.longitude
      })
    }
  }) 
  },

三，在app.json设置

  "permission": {
    "scope.userLocation": {
      "desc": "获取位置，方便按区域分配 "
    }
  },

四，效果

相关地图在电脑上不太准确，具体可到手机上真机查看