微信小程序 地图相关代码

前端之家收集整理的这篇文章主要介绍了微信小程序 地图相关代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Page({
  data: {
    // markers 标记点
    // id: marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。
    // latitude: 纬度
    // longitude: 经度
    // iconPath: 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径
    latitude: 0,// 地图打开默认经度
    longitude: 0,// 地图打开默认纬度
    markers: [],controls: [{
      id: 1,iconPath: '/resources/location.png',position: {
        left: 10,top: 400,width: 30,height: 30
      },clickable: true
    }]
  },onLoad: function() {
    this.mapContext = wx.createMapContext("map",this);
    wx.getLocation({
        success: (res) => {
          this.setData({
            latitude: res.latitude,longitude: res.longitude
          })
        }
      }),this.getCenterLocation();
  },//  定义函数,这个函数获取地图中心位置坐标
  getCenterLocation: function() {
    this.mapContext.getCenterLocation({
      success: (suc) => {
        this.setData({
          markers: [{
            iconPath: "/resources/user.png",id: 0,longitude: suc.longitude,latitude: suc.latitude,height: 30,alpha: 0.5,callout: {
              content: "工程师",color: "#ffffff",fontSize: 10,borderRadius: 10,bgColor: "#6e707c",padding: 5,display: "ALWAYS"
            }
          }]
        });
      },});
  },// chooseLocation: function() {
  //   wx.chooseLocation({
  //     success: (res) => {
  //       this.setData({
  //         latitude: res.latitude,//         longitude: res.longitude
  //       })
  //       wx.getLocation({
  //           success: (res) => {
  //             this.setData({
  //               latitude: res.latitude,//               longitude: res.longitude
  //             })
  //           }
  //         }),//         this.getCenterLocation();
  //     }
  //   })
  // },regionchange(e) {
    console.log(e.type)
  },markertap(e) {
    console.log(e.markerId)
  },controltap(e) {
    console.log(e.controlId)
  }
})

    
   
   
    
   

猜你在找的微信小程序相关文章