一、粗略图

二、详情图

三、当前坐标图

四、页面配置

地图API详情见下方链接

developers.weixin.qq.com/miniprogram…

app.JSON配置

 "permission": {
      "scope.userLocation": {
        "desc" : "展示"
      }
  },
  "requiredPrivateInfos":["chooseLocation"],
复制代码

wxml

<map scale="14" longitude="{{longitude}}" latitude="{{latitude}}" enable-3D="{{true}}" show-compass="{{true}}" enable-satellite="{{true}}" enable-traffic="{{true}}" show-location="{{false}}" markers="{{markers}}"></map>
<!-- 
  longitude 经度
  latitude 维度
  enable-3D 是否展示3D楼块
  show-compass 显示指南针
  enable-satellite 是否开启卫星图
  enable-traffic 是否开启实时路况
  show-location 显示带有方向的当前定位点
  markers 自定义标记点用于在地图上显示标记的位置
  -->

<button type="primary" bindtap="getMap">获取</button>

JS

Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude: 112.358339,//经度
    latitude: 33.931661,//维度
  },
  getMap() {
    //打开地图选择位置
    wx.chooseLocation({
      success: res => {
        let { latitude, longitude } = res
        //设置标记点样式
        let markers = [
          {
            //id
            id: new Date().getTime(),
            //纬度
            latitude: latitude,
            //经度
            longitude: longitude,
            //icon地址
            iconPath: "../../images/地址.png",
            //icon宽度
            width: 30,
            //icon高度
            height: 30
          }
        ]
        //保存 经纬度
        this.setData({
          latitude: latitude,
          longitude: longitude,
          markers: markers
        })
      },
      fail: err => {
        console.log(err);
      }
    })
  },
  
})

五、搜索API及搜索实现步骤

地图搜索API详情链接：lbs.qq.com/miniProgram…

关键字搜索显示标记点

1. 通过wx.getlocation获取经纬度获取当前位置

 //获取经纬度
    wx.getLocation({
      type: 'wgs84',
      success: res => {
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
      },
      fail: err => {
        console.log(err);
      }
    })

2. 通过腾讯位置服务的地点搜索实现周边搜索

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: '开发密钥（key）' // 必填
});
 
// 事件触发，调用接口
nearby_search:function(){
   var _this = this;
   // 调用接口
   qqmapsdk.search({
      keyword: 'kfc',  //搜索关键词
      location: '39.980014,116.313972',  //设置周边搜索中心点
      success: function (res) { //搜索成功后的回调
        var mks = []
        for (var i = 0; i < res.data.length; i++) {
          mks.push({ // 获取返回结果，放到mks数组中
            title: res.data[i].title,
            id: res.data[i].id,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng,
            iconPath: "/resources/my_marker.png", //图标路径
            width: 20,
            height: 20
          })
        }
        _this.setData({ //设置markers属性，将搜索结果显示在地图中
          markers: mks
        })
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res){
        console.log(res);
      }
  });
}

3. 点击标记点显示标记点信息并且可以 去这里（注意：真机调试是可以的。因为电脑上没有地图app所以报错。）

4. 点击到这里去通过 wx.openLocation 来实现

      wx.openLocation({
          latitude: "到达地的维度",
          longitude: "到达地的经度",
    })