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

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"服务:青少年英语培训\r\n姓名:陶士涵\r\n电话:18808987876"+0.01
<!--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"
  ],"window": {
    "backgroundTextStyle": "light"
  },"sitemapLocation": "sitemap.json": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于获取周边服务" 
    }
  }
}

 

相关文章

概述 消息能力是小程序能力中的重要组成,我们为开发者提供了...
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.mini...
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-...
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法...
H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器:...
微信小程序获取data-xx=&quot;&quot;属性的值,自定...