• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序地图map组件使用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请


wxml:

<map id="map" latitude="{{latitude}}" longitude="{{longitude}}"  controls="{{controls}}" bindcontroltap="controltap"
 markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange"   scale="14"  show-location>
 </map>

wxss:

page{ width: 100%; height:100%; }
#map{ width: 100%; height:100%; }

js:

data: {
    markers: [],  //地图参数:
    latitude: "", //纬度 
    longitude: "",  //经度
  },
  regionchange(e) {
    //console.log(e)
  },
  markertap(e) {
    //console.log(e)
  },
  controltap(e) {
    //console.log(e)
  },

  //获得地图
  getMyMap(e) {
    let that = this;
    //自行查询经纬度 http://www.gpsspg.com/maps.htm
    const mapLatitude = 23.1194300000,
          mapLongitude = 113.3212200000;
    wx.getLocation({
      type: 'wgs84', 
      success(res){
      // 当前自己的经纬度 res.latitude,res.longitude
        that.setData({
          latitude: mapLatitude,
          longitude: mapLongitude,
          markers: [{
            id: "0",
            latitude: mapLatitude,
            longitude: mapLongitude,
            iconPath: "https://xcx.quan5fen.com/Public/xcx-hitui/image/imgs-jyh/map-ico.png",
            width: 40,
            height: 40,
            callout: {
              'display': 'ALWAYS', 'fontSize': '30rpx', 'content': '广州珠江新城',
              'padding': '8rpx', 'boxShadow': '0 0 5rpx #333','borderRadius':'4rpx'
            }
          }],
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getMyMap()
  },

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
PyQt5(2)、垃圾分类小程序(2)——初代窗口程序可执行文件发布时间:2022-07-18
下一篇:
门店小程序怎么开通发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap