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

下面代码粘贴复制就可以访问，另外一切以手机测试为准

主要体现的功能
一、本身自我的一个定位
二、输入目标地点
三、导航到目标地点
四、目标地点周边的搜索，和点击标记点，在点击（到这去）实现导航切换

前端页面

<view class="page-body">
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: {{height}}px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers="{{covers}}"
      scale="{{scale}}"
      bindmarkertap="markerTap"
    ></map>
    <view class="Dang" bindtap="Dingwei"><image src="../images/dingweidang.png"></image></view>
    <view class="Daohang">
    <view class="title">{{name==''?'未选择':name}}</view>
    <view class="caozuo">
        <button class="zhou" bindtap="Zhoubian"><image src="../images/zhoubian.png"></image><text>周边</text></button>
        <button class="left" bindtap="getCenterLocation" type="primary"><image src="../images/mudidi.png"></image><text>选择目的地</text></button>
        <button class="right" bindtap="Xdiandaohang"><image src="../images/daozhequ.png"></image><text>到这去</text></button>
    </view>
    </view>
  </view>
</view>

button {
  margin:0;
  padding:0;
  border-radius:0;
  border:none;
  font-size:1em;
  background-color:transparent;
}
button::after{
  border: none;
}
.page-section-gap{
  box-sizing: border-box;
  position: relative;
}
.page-section-gap .Dang{
  position: absolute;
  bottom: 280rpx;
  right: 40rpx;
  background-color: #fff;
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items:center;
}
.page-section-gap .Dang image{
  width: 40rpx;
  height: 40rpx;
}
.page-body-button {
  margin-bottom: 30rpx;
}

.daohang{
  border-radius: 10rpx;
  background-color: #000;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  font-weight: bold;
}
.Zhoubian{
  margin-top: 20px;
}
.page-body .Daohang{
  position: absolute;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  bottom: 0rpx;
  left: 0rpx;
  z-index: 999;
  width: 100%;
  padding: 20rpx 0;
}
.page-body .Daohang .title{
  font-size: 30rpx;
  font-weight: 500;
  color: #000;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #ccc;
  margin: 0 20rpx;
}
.page-body .Daohang .caozuo{
  display: flex;
  justify-content: center;
  align-items:center;
  padding: 20rpx 0;
  margin: 0 20rpx;
}
.page-body .Daohang .caozuo .zhou{
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  width: 200rpx;
  background-color: #fff;
  border: 1px solid #FFFFFF;
}
.page-body .Daohang .caozuo .zhou image{
  width: 30rpx;
  height: 30rpx;
}
.page-body .Daohang .caozuo .zhou text{
  font-size: 24rpx;
  color: #000;
  font-weight: 500;
  margin-top: 10rpx;
}
.page-body .Daohang .caozuo .left{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  /* border: 1px solid #1296db; */
  padding: 10rpx;
  border-radius: 32rpx;
}
.page-body .Daohang .caozuo .left image{
  width: 40rpx;
  height: 40rpx;
}
.page-body .Daohang .caozuo .left text{
  font-size: 30rpx;
  color: #fff;
  font-weight: 500;
  margin-left: 20rpx;
}
.page-body .Daohang .caozuo .right{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  background-color: #1296db;
  padding: 10rpx;
  border-radius: 32rpx;
  margin-left: 20rpx;
}
.page-body .Daohang .caozuo .right image{
  width: 40rpx;
  height: 40rpx;
}
.page-body .Daohang .caozuo .right text{
  font-size: 30rpx;
  color: #fff;
  font-weight: 500;
  margin-left: 20rpx;
}

效果

官方链接腾讯位置服务

var util = require("../utils/util.js");
var timer = require('../../wxTimer/wxTimer.js');
var app = getApp();
var QQMapWX = require('../utils/qqmap-wx-jssdk.min.js');//引用库
var qqmapsdk = new QQMapWX({
  key: app.globalData.tengxunMapKey//微信小程序，腾讯位置服务key
});
Page({
  data: {
    latitude: '39.9090401338795',//默认中心点
    longitude: '116.39744076190188',//默认中心点
    name: '',
    address: '',
    markers: [{
      id: 11,
      latitude: '',
      longitude: '',
      name: '',
      callout: {}
    }],
    xuanqu: {},
    scale: 16,//默认缩放
  },
  onShow: function () {
    var that = this;
    that.setData({
      height: wx.getSystemInfoSync().windowHeight,//默认地图大小满屏
    })
  },
  Dingwei: function () {
    var that = this;
    if (wx.getSystemInfoSync().locationEnabled == false) {//判断手机是否开启GPS
      wx.showToast({
        title: '请打开手机定位',
        icon: 'none',
        duration: 2000,
      })
      return;
    }
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {//检测当前用户是否授权位置服务
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置，请确认授权',
            success: function (res) {
              if (res.confirm) {//点击了确认
                wx.openSetting({
                  success(data) {
                    if (data.authSetting["scope.userLocation"] == true) {//如果授权成功
                      wx.getLocation({//获取当前位置信息
                        type: 'gcj02',
                        success(res) {
                          var latitude = res.latitude
                          var longitude = res.longitude
                          var speed = res.speed
                          var accuracy = res.accuracy
                          var markers = [];//初始化坐标点
                          markers.push({ // 获取返回结果，放到mks数组中
                            latitude: latitude,
                            longitude: longitude,
                            iconPath: '../images/dingweidian2.png',
                            width: 20,
                            height: 20,
                          })
                          that.setData({
                            markers: markers,
                            latitude: latitude,
                            longitude: longitude,
                            scale: 16,
                            speed: speed,
                            accuracy: accuracy,
                          })
                        }
                      })
                    } else {
                      console.log('用户取消授权')
                    }
                  }
                })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        } else {//如果授权了位置服务，直接获取
          wx.getLocation({
            type: 'gcj02',
            success(res) {
              console.log(res);
              var latitude = res.latitude
              var longitude = res.longitude
              var speed = res.speed
              var accuracy = res.accuracy
              var markers = [];
              markers.push({ // 获取返回结果，放到mks数组中
                latitude: latitude,
                longitude: longitude,
                iconPath: '../images/dingweidian2.png',
                width: 20,
                height: 20,
              })
              that.setData({
                markers: markers,
                latitude: latitude,
                longitude: longitude,
                scale: 16,
                speed: speed,
                accuracy: accuracy,
              })
            }
          })
        }
      }
    })
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },
  getCenterLocation: function () { 
    var that = this;
    if (wx.getSystemInfoSync().locationEnabled == false) {
      wx.showToast({
        title: '请打开手机定位',
        icon: 'none',
        duration: 2000,
      })
      return;
    }
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置，请确认授权',
            success: function (res) {
              if (res.confirm) {
                wx.openSetting({
                  success(data) {
                    if (data.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 2000,
                      })
                      wx.chooseLocation({//这个是拉起搜索
                        success(res) {
                          var xuanqu = that.data.xuanqu;
                          xuanqu.xuanqu_nanme = res.name;
                          xuanqu.xuanqu_address = res.address;
                          xuanqu.xuanqu_latitude = res.latitude;
                          xuanqu.xuanqu_longitude = res.longitude;
                          var markers = [];
                          markers.push({ // 获取返回结果，放到mks数组中
                            latitude: res.latitude,
                            longitude: res.longitude,
                            iconPath: '../images/dingweidian.png',
                            width: 30,
                            height: 30,
                            callout: {
                              content: res.name,
                            },
                          })
                          that.setData({
                            xuanqu: xuanqu,
                            markers: markers,
                            latitude: res.latitude,
                            longitude: res.longitude,
                            name: res.name,
                            address: res.address,
                          })
                        },
                      })
                    } else {
                      console.log('用户取消授权')
                    }
                  }
                })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        } else {
          wx.chooseLocation({
            success(res) {
              var xuanqu = that.data.xuanqu;
              xuanqu.xuanqu_nanme = res.name;
              xuanqu.xuanqu_address = res.address;
              xuanqu.xuanqu_latitude = res.latitude;
              xuanqu.xuanqu_longitude = res.longitude;
              //实时更新定位点
              var markers = [];
              markers.push({ // 获取返回结果，放到mks数组中
                latitude: res.latitude,
                longitude: res.longitude,
                iconPath: '../images/dingweidian.png',
                width: 30,
                height: 30,
                callout: {
                  content: res.name,
                },
              })
              that.setData({
                xuanqu: xuanqu,
                markers: markers,
                latitude: res.latitude,
                longitude: res.longitude,
                name: res.name,
                address: res.address,
              })
            },
          })
        }
      }
    })
  },
  Xdiandaohang: function () { //导航
    var that = this;
    var latitude = that.data.latitude;
    var longitude = that.data.longitude;
    var name = that.data.name;
    var address = that.data.address;
    wx.openLocation({
      latitude,
      longitude,
      scale: 18,
      name,
      address,
    })
  },
  Zhoubian: function () {
    var that = this;
    var latitude = that.data.latitude;
    var longitude = that.data.longitude;
    var mks = []
    that.setData({ //初始化markers
      markers: mks
    })
    qqmapsdk.search({
      keyword: '酒店', //搜索关键词
      location: '' + latitude + ',' + longitude + '', //设置周边搜索中心点
      success: function (res) { //搜索成功后的回调
        for (var i = 0; i < res.data.length; i++) {
          mks.push({ // 获取返回结果，放到mks数组中
            //title: res.data[i].title,
            callout: {
              content: res.data[i].title,
              color: '#ffffff',
              fontSize: 16,
              borderRadius: 5,
              bgColor: '#ff0000',
              padding: 10,
              textAlign: 'center',
              display: 'BYCLICK',
              zIndex: 99,
            },
            id: res.data[i].id,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng,
            iconPath: "../images/dingweidian.png", //图标路径
            width: 30,
            height: 30,
            zIndex: 24,
          })
        }
        that.setData({ //设置markers属性，将搜索结果显示在地图中
          markers: mks
        })
      },
    });
  },
  //标记点击事件
  markerTap: function (e) {
    var that = this;
    var str = e.detail.markerId;//这个里要注意下，在电脑中e.detail.markerId的值为9000000几，但是真机测试就是腾讯位置信息接口返回的id
    var markers = that.data.markers;
    for (var i = 0; i < 10; i++) {
      if (markers[i].id == str) {
        that.setData({
          latitude: markers[i].latitude,
          longitude: markers[i].longitude,
          name: markers[i].callout.content,
          //name: markers[i].title,
          callout: {
            content: markers[i].title,
          }
        })
      }
    }
  },
})