小程序地图

js
app.js需要定义一下

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

const dianpu = "../../../assets/gps/dianpu5.png";
const dingwei = "../../../assets/gps/gps.png"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    addmissage: '选的位置',
    // markers	 Array	标记点
    stitle: '故宫',
    latitude: "",
    longitude: "",
    scale: 14,
    markers: [{
        iconPath: dianpu,
        id: 0,
        // 28.2422800000,113.0841100000
        // 湖南省长沙市长沙县星沙街道惊塘路社区阳光紫薇园3栋107号
        latitude: 28.2422800000,
        longitude: 113.0841100000,
        width: 30,
        height: 30,
        content: '123'
      },
      {
        iconPath: dianpu,
        id: 1,
        // 28.2644900000,113.0523610000
        // 长沙县湘龙街道湘润社区龙塘小区B18栋009号
        latitude: 28.2644900000,
        longitude: 113.0523610000,
        width: 30,
        height: 30
      },
      {
        iconPath: dianpu,
        id: 2,
        // 28.1996100000,113.1316910000
        // 长沙县黄兴大道与人民路交汇处领东汇5栋113号
        latitude: 28.1996100000,
        longitude: 113.1316910000,
        width: 30,
        height: 30
      },
      {
        iconPath: dianpu,
        id: 3,
        // 28.2484900000,112.9967500000
        // 长沙市开福区万科城二期B区S4栋N单元105号门面
        latitude: 28.2484900000,
        longitude: 112.9967500000,
        width: 30,
        height: 30
      },
      {
        iconPath: dianpu,
        id: 4,
        // 28.2528600000,113.1055000000
        content: '长沙县星沙街道松雅社区恒大翡翠华庭15栋108号',
        latitude: 28.2528600000,
        longitude: 113.1055000000,
        width: 30,
        height: 30
      }
    ],
    // controls控件 是左下角圆圈小图标,用户无论放大多少,点这里可以立刻回到当前定位(控件（更新一下,即将废弃，建议使用 cover-view 代替）)
    controls: [{
      id: 1,
      iconPath: dingwei,
      position: {
        left: 15,
        top: 260 - 50,
        width: 40,
        height: 40
      },
      clickable: true
    }],
    distanceArr: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this
    //获取当前的地理位置、速度
    wx.getLocation({
      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      success: function(res) {
        console.log(res)
        //赋值经纬度
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,

        })
      },
      fail() {
        wx.showModal({
          title: '警告',
          content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入！！！',
          showCancel: false,
          confirmText: '重新授权', // 此处的值只能在4个字节以内，超了会报错
          success: function(res) {
            // 用户没有授权成功，不需要改变值
            if (res.confirm) {
              console.log('用户点击了“返回授权”');
              wx.openSetting()
            }
          }
        })
      }
    })



  },
  //controls控件的点击事件
  bindcontroltap(e) {
    var that = this;
    if (e.controlId == 1) {
      that.setData({
        latitude: this.data.latitude,
        longitude: this.data.longitude,
        scale: 14,
      })
    }
  },
  // 点击markers标记的点 然后导航
  gotohere: function(res) {
    console.log(res);
    let lat = ''; // 获取点击的markers经纬度
    let lon = ''; // 获取点击的markers经纬度
    let name = ''; // 获取点击的markers名称
    let markerId = res.markerId; // 获取点击的markers  id
    let markers = res.currentTarget.dataset.markers; // 获取markers列表
    console.log(markers)
    for (let item of markers) {
      if (item.id === markerId) {
        lat = item.latitude;
        lon = item.longitude;
        console.log(item)
        name = item.content; // item.callout.content; 如果有就用
        console.log(name)
        wx.openLocation({ // 打开微信内置地图，实现导航功能（在内置地图里面打开地图软件）
          latitude: lat,
          longitude: lon,
          name: name,
          success: function(res) {
            console.log(res);
          },
          fail: function(res) {
            console.log(res);
          }
        })
        break;
      }
    }
  },
  //导航
  onGuideTap: function(event) {
    var lat = Number(event.currentTarget.dataset.latitude);
    var lon = Number(event.currentTarget.dataset.longitude);
    var bankName = event.currentTarget.dataset.bankname;
    console.log(lat);
    console.log(lon);
    wx.chooseLocation({
      success: res => {
        console.log(res)
        var lats = res.latitude
        var longs = res.longitude
        console.log(lats)
        console.log(longs)
        this.setData({
          lats: res.latitude,
          longs: res.longitude
        })
      }
    })
    wx.openLocation({
      type: 'gcj02',
      latitude: this.data.lats,
      longitude: this.data.longs,
      name: bankName,
      scale: 28,
      success: res => {
        console.log(res)
      }
    })
  },



})

html

 <view class="map_container">
  <map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' data-markers="{{markers}}" markers='{{markers}}' controls="{{controls}}" bindcontroltap="bindcontroltap" bindmarkertap="gotohere" polyline='{{polyline}}' circles="{{circles}}" bindcontroltap='bindcontroltap'
    show-location></map>
</view>
 
 
<!-- 以下是导航部分 -->
 
<view class='list-guide'>
<!-- 这里的坐标本应该是从服务器获取数据的,这时丈先写死在页面上了 -->
  <view bindtap="onGuideTap" data-latitude='{{lats}}' data-longitude='{{longs}}' data-bankName='最高人民检察院'>
    <!-- <image src='/images/banklist/daohang.png' class='list-guide-imgae'></image> -->
    <text  class='list-guide-text'>导航去附近的店购买</text>
  </view>
  <!-- <view bindtap='onbankTap' data-bankId="{{item.BANK_ID}}"> -->
    <!-- <image src='/images/banklist/xiangqing.png' class='list-guide-imgae'></image> -->
    <!-- <text class='list-guide-text'>详情</text> -->
  <!-- </view> -->
 
</view>

css

page{
  margin: 0;
  padding: 0;
}
.map_container {
  height: 100%;
  width: 100%;
}
 
.map {
  height: 100%;
  width: 100%;
}
 
 .listtexa{
   width: 100%;
 }
 
 
.list-guide{
  position: fixed;
  flex-direction: row; 
  justify-content:space-around;
  border-top: 1px solid #ededed;
  height: 80rpx;
  bottom: 0rpx;
  background-color: pink;
  width: 100%;
}
/* .list-guide-imgae{
  height: 70rpx;
  width: 70rpx;
  margin-right: 20px;
  vertical-align: middle;
} */
.list-guide-text{
  vertical-align: middle;
  line-height: 90rpx;
  width: 100%;
  font-size: 35rpx;
}