微信小程序地图

map标签

image.png
使用map标签可以看到地图，然后在index.wxss里设置样式。
wxss里面默认有一个page属性

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

这时候可以看到一个充满屏幕的地图，可以根据鼠标选择位置

image.png

但是每次编译位置都是北京的位置

位置定位

使用GPS定位到当前位置
在map标签里面添加一个属性，表示经度、纬度，longitude,经度，latitude,纬度
用腾讯坐标拾取器查取一个位置的经纬度，我查取得是银川汽车站，

image.png

<map
longitude='106.292590'
latitude='38.468760'
></map>

这是可以看到地图中显示的是银川汽车站

image.png

因为后期经纬度是根据手机的GSP位置来进行定位的，所以在index.js的data里面定义两个属性

image.png
而在index.wxml中获取这两个属性的值

<map
longitude='{{longitude}}'
latitude='{{latitude}}'
></map>

根据智能设备动态获取地理位置

打开模拟器的调试器，里面有个Sensor,里面会有相应的经纬度信息。
index.js里面的onload是首次加载页面的时候会被调用，可以在这里设置一些初始化的信息。
首先data里面的经纬度的初始值都会被设置为0；

data: {
    longitude: 0,
    latitude: 0
      }, 

sensor里面的经纬度值

image.png

在onload里面获取经纬度值

 onLoad: function () {
    var that=this;
   wx.getLocation({
     success: function(res) {
       var logi=res.longitude;
       var lat=res.latitude;
       that.setData({
         longitude:logi,
         latitude:lat
       })
     },
   })
  }

wx.getLocation是根据智能设备获取当前的位置信息
setData是给data中的属性设置值。

image.png