微信小程序地图功能

Dear 丶 2022-12-20 02:55 227阅读 0赞

一，显示地图

二，获取当前位置

在对地图进行控制显示区域大小时，想将地图全屏显示在手机上，使用平时的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": "获取位置，方便按区域分配 "
        }
      },

四，效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20221120/8ed976f1c70747c09bf712bce734997d.png