微信小程序-地图实例

效果图



第一步申请高德地图Key
申请地址
下载amap-wx.js 高德地图封装好了的API

用到API接口二次封装

let amapFile = require("./amap-wx");
// 高德开发者key
let key = '申请的key';
let myAmapFun = new amapFile.AMapWX({ key });

class Amap {
  /**
   * 获取POI数据
   * @param {string} querykeywords 
   */
  static getPoiAround(querykeywords = '') {
    return new Promise((resolve, reject) => myAmapFun.getPoiAround({ querykeywords, success: resolve, fail: reject }));
  }

  /**
   * 获取地理描述数据
   */
  static getRegeo() {
    return new Promise((resolve, reject) => myAmapFun.getRegeo({ success: resolve, fail: reject }));
  }
  /**
   * 获取天气数据
   *
   */
  static getWeather() {
    return new Promise((resolve, reject) => myAmapFun.getWeather({ success: resolve, fail: reject }));
  }

  /**
   * 获取输入提示词
   * @param {string} keywords 
   * @param {string} location 
   */
  static getInputtips(city, location = '', keywords = '') {
    return new Promise((resolve, reject) => myAmapFun.getInputtips({ keywords, location, city, success: resolve, fail: reject }));
  }

  /**
   * 获取路线规划
   * type : getDrivingRoute --驾车
   * type : getWalkingRoute --步行
   * type : getTransitRoute --公交
   * type : getRidingRoute --骑行
   * @param {string} origin 
   * @param {string} destination 
   */
  static getRoute(origin, destination, type, city) {
    return new Promise((resolve, reject) => myAmapFun[type]({ origin, destination, city, success: resolve, fail: reject }));
  }
}

module.exports = Amap;

amap.getRegeo()调用获取地图描述，显示当前自己坐标点

    amap.getRegeo()
      .then(d => {
        console.log(d);
        let {
          name,
          desc,
          latitude,
          longitude
        } = d[0];
        //得到自己的坐标点（模拟器上不准确，准确请到手机体验）
        let {
          city
        } = d[0].regeocodeData.addressComponent;
        //获取详细城市地址
        var value = "查询附近信息的内容"
        //var lonlat = longitude + "," + latitude;
        //使用高德地图API getPoiAround 获取周边信息，参数value
        amap.getPoiAround(value)
          .then(d => {
          //成功回调 markers地图显示坐标点
            let {
              markers
            } = d;
            //给每一个坐标点添加图标标识
            markers.forEach(item => {
              item.iconPath = "/images/marker.png";
            })
            that.setData({
              poisData:d.poisData,
              markers
            });
            that.showMarkerInfo(markers[0]);
            that.changeMarkerColor(0);
          })
          .catch(e => {
            console.log(e);
          })

        this.setData({
          city,
          latitude,
          longitude,
          textData: {
            name,
            desc
          }
        })
      })
      .catch(e => {
        console.log(e);
      })

经度（longitude）、纬度(latitude)
使用小程序wx.getSystemInfo API获取手机屏幕高度 设置地图大小
得到坐标点，渲染数据
controls 增加地图标识作用回到自己坐标
bindcontroltap 绑定事件

  clickcontrol(e) {
    console.log("回到用户当前定位点");
    let {
      controlId
    } = e;
    //创建地图实例
    //使用moveToLocation方法，将地图中心移动到当前定位点，需要配合map组件的show-location使用
    let mpCtx = wx.createMapContext("map");
    mpCtx.moveToLocation();
  },

scale 地图显示大小
markers 坐标点
bindmarkertap 绑定坐标点 点击事件

    wx.getSystemInfo({
      success:function(res)
      {
        console.log(res)
        that.setData({
          height:res.windowHeight
        })
      }
    })