欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[小程序]微信小程序获取位置展示地图并标注信息

程序员文章站 2022-06-24 08:23:21
1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用wx.getLocation获取自己的位置,然后再回调中使用setData方法,赋予数据给前台页面展示标注点 index.js index.wxml app.json ......

1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式
2.获取位置要在app.json中标明权限
3.先使用wx.getlocation获取自己的位置,然后再回调中使用setdata方法,赋予数据给前台页面展示标注点

index.js

//index.js
//获取应用实例
const app = getapp()

page({
  data: {
  },
  onload: function () {
    var self=this;
    this.mapctx = wx.createmapcontext('mymap');
    wx.getlocation({
      type: 'gcj02',
      success(res) {
        self.setdata({
          latitude : res.latitude,
          longitude : res.longitude,
          markers: [{
            id: 1,
            latitude: res.latitude,
            longitude: res.longitude,
            iconpath: '/image/location.png',
            callout:{
              content:"服务:青少年英语培训\r\n姓名:陶士涵\r\n电话:18808987876",
              bgcolor:"#fff",
              padding:"5px",
              borderradius:"2px",
              borderwidth:"1px",
              bordercolor:"#07c160",
            }
          },
            {
              id: 2,
              latitude: res.latitude,
              longitude: res.longitude+0.01,
              iconpath: '/image/location.png',
              callout: {
                content: "服务:出租龙兴园西区9号楼二单元501\r\n姓名:陶士涵\r\n电话:18808987876",
                bgcolor: "#fff",
                padding: "5px",
                borderradius: "2px",
                borderwidth: "1px",
                bordercolor: "#07c160",
               
              }
            }
          ],
        });
      }
    })
  },
})

index.wxml

<!--index.wxml-->
    <map
      id="mymap"
      style="width: 100%; height:100vh;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers="{{covers}}"
      show-location
    ></map>

app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundtextstyle": "light",
    "navigationbarbackgroundcolor": "#fff",
    "navigationbartitletext": "找服务",
    "navigationbartextstyle": "black"
  },
  "sitemaplocation": "sitemap.json",
  "permission": {
    "scope.userlocation": {
      "desc": "你的位置信息将用于获取周边服务" 
    }
  }
}

[小程序]微信小程序获取位置展示地图并标注信息