小程序地图map（一）

timg.jpg

先看效果图

image.png
image.png

微信地图map组件

1.相关属性
longitude：中心经度
latitude：中心纬度
scale：缩放级别，取值范围为3-20  默认16
markers：标记点
polyline：路线
circles：圆
include-points：缩放视野以包含所有给定的坐标点
show-location：显示带有方向的当前定位点  默认false
polygons：多边形
subkey：个性化地图使用的key
layer-style：个性化地图配置的 style，不支持动态修改  默认1
rotate：旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角  默认0
skew：倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角  默认0
enable-3D：展示3D楼块(工具暂不支持）  默认false
show-compass：显示指南针  默认false
show-scale：显示比例尺，工具暂不支持  默认false
enable-overlooking：开启俯视  默认false
enable-zoom：是否支持缩放  默认true
enable-scroll：是否支持拖动  默认true
enable-satellite：是否开启卫星图  默认false

代码展示

1.首先必须在app.json中配置
"permission": {
    "scope.userLocation": {
      "desc": "授权后方可使用该功能" 
    }
  },
wxml
<map id="myMap" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" show-location style="width: 100%; height: 300px;"></map>
js
// pages/map/map.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    title: '西安未央区',  //地址
    address: '西安市未央区北苑',  //详细地址
    longitude: 108.951408,  //经度
    latitude: 34.368361,  //纬度
    scale: 16,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success(res) {
        wx.openLocation({
          name: that.data.title, //位置名
          address: that.data.address, //详细位置
          longitude: that.data.longitude,  //经度
          latitude: that.data.latitude,  //纬度
          scale: 16
        })
      }
    })
  },
})