原生小程序 之 实现 地图打（图标事件，获取用户位置）

原生小程序 之 实现 地图打（图标事件，获取用户位置）

• 官网
  • 获取用户位置
  • 地图

配置 获取 用户地理位置 app.json

  "window": {
    "navigationBarTextStyle": "black"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" 
    }
  },

• 效果
  

实现地图 map

<!--pages/map/map.wxml-->
<view>
  map
  <!-- style="width: {{mapWidth}}rpx; height: {{mapHeight}}rpx;"  -->
  <view class="page-section page-section-gap"> 
    <map id="myMap" style="width: 100%; height: {{mapHeight}}rpx;" latitude="{{latitude}}" longitude="{{longitude}}" 
    scale='{{scale}}' markers="{{markers}}" controls="{{controls}}" show-location bindmarkertap="toaddress"></map>
  </view>

</view>


// pages/map/map.js
const appInstance = getApp()
Page({
  data: {
    latitude: "",
    longitude: "",
    scale:10,
    markers: [
        {
          iconPath: "../../static/location/location.png",
          id: 0,
          latitude: 22.566515,
          longitude:113.89997,
          width: 40,
          height: 40,
          label: {
            content: "深圳翻身地铁站C口",
            color: "#000",
            fontSize: 12,
            anchorX: -(0.5 * (3 * 24))/2,
            textAlign: "center"
          }
        },
        {
          iconPath: "../../static/location/location.png",
          id: 1,
          latitude: 39.87128,
          longitude: 116.385488,
          width: 40,
          height: 40,
          label: {
            content: "北京南站",
            color: "#000",
            fontSize: 12,
            anchorX: -(0.5 * (5 * 24))/2,
            textAlign: "center"
          }
        }
      ],
    controls: [{
      id: 1,
      iconPath: '../../static/location/location.png',
      position: {
        left: 15,
        top: 260 - 50,
        width: 40,
        height: 40
      },
      clickable: true
    }],
    mapWidth:'',
    mapHeight:'',
    mapCtx:"",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // 初始化 设置地图大小
    var sy = wx.getSystemInfoSync();
    var mapWidth = sy.windowWidth*2;
    var mapHeight = sy.windowHeight*2;
    this.setData({
      mapWidth:mapWidth,
      mapHeight:mapHeight,
    })
  },
  // 页面展示
  onShow(){
    // console.log("首页",appInstance.globalData);
    if ( appInstance.globalData.userInfo ) {
      this.setData({
        latitude:appInstance.globalData.userInfo.latitude,
        longitude:appInstance.globalData.userInfo.longitude
      })
    }
  },
  onReady: function (e) {
    let _this = this;
    // 手动 获取了 用户的位置
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        // console.log("resres",res);
        const latitude = res.latitude	//获取经度
        const longitude = res.longitude	//获取维度
        _this.setData({
          latitude:latitude,
          longitude:longitude
        })
        // 更改数据
        let obj = {
          latitude:latitude,
          longitude:longitude
        }
        // console.log("2222",appInstance.globalData.userInfo,obj);
        appInstance.globalData.userInfo = obj
        // console.log("首页2222",appInstance.globalData);
      }
     })
  },
  // 地图 标点的地方 点击事件
  toaddress:function(e){
    console.log("e",e)
    var id = e.markerId
    console.log("id",id)
  },
})
// app.json 之中 配置 获取用户位置
// "permission": {
//   "scope.userLocation": {
//     "desc": "你的位置信息将用于小程序位置接口的效果展示" 
//   }
// },

全局数据 app.js

// app.js
App({
  onLaunch() {
  },
  globalData: {
    userInfo:{
      latitude:"39.87128",
      longitude:"116.385488"
    }
  }
})

• 效果
  
  事件点击效果