微信小程序-腾讯地图

index.wxml

<view>
  <map id="map" longitude="{{ longitude }}" latitude="{{ latitude }}" markers="{{ markers }}" bindtap="maptap" bindregionchange="regionChange" bindmarkertap="markertap" show-location style="width:100vw; height: 90vh;"></map>
</view>

index.js

//index.js
//获取应用实例
const app = getApp();
//引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
//实例化API核心类
var qqmapsdk = new QQMapWX({
  key: 'GMQBZ-BNVCX-REY4S-ZXZZS-42NUJ-CQF6F'
});

Page({
  data: {
    adrValue: '',
    longitude: 120.19663,
    latitude: 35.95995,
    markers: []
  },
  onReady(e) {
    var mapCtx = wx.createMapContext('map');
  },
  onLoad () {
    var _this = this;
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function (res) {
        var longitude = res.longitude;
        var latitude = res.latitude;
        _this.setData({
          longitude: longitude,
          latitude: latitude
        });
        _this.setMarkers(_this, longitude, latitude);
      }
    })
  },
  //获取input搜索值
  getAdressValue(e) {
    this.data.adrValue = e.detail;
  },
  //搜索按钮点击事件-搜索地址
  searchAdr(e) {
    var _this = this;
    var val = this.data.adrValue;
    if(val==''){
      wx.showToast({
        title: '地址不能为空',
        icon: 'none',
        duration: 1500
      });
    }else{
      qqmapsdk.geocoder({
        address: val,
        success(res){
          var longitude = res.result.location.lng;
          var latitude = res.result.location.lat;
          _this.setData({
            longitude: longitude,
            latitude: latitude
          });
        },
        fail(error) {
          wx.showToast({
            title: '未搜索到你想看的区域',
            icon: 'none',
            duration: 1500
          });
        }
      });
    }
  },
  //拖拽地图事件-标记点跟随地图中心点移动
  regionChange(res) {
    var _this = this;
    var mapCtx = wx.createMapContext('map');
    if(res.type==='end'){
      mapCtx.getCenterLocation({
        success(response) {
          _this.setMarkers(_this, response.longitude, response.latitude);
        }
      });
    }
  },
  //点击地图事件-添加点击位置标记并把点击位置作为中心点
  maptap() {
    var _this = this;
  },
  //点击标记点事件-
  markertap(e) {
    console.log(e.markerId);
  },
  //设置marker以及中心点位置
  setMarkers(_this, long, lat) {
    //获取附近10个最近的酒店位置
    // app.request({
    //   url: 'test.php',
    //   data: {
    //     longitude: long,
    //     latitude: lat,
    //   },
    //   success(res) {

    //   }
    // });
    var point = [
      { id: 1, longitude: 120.20663, latitude: 35.95995, name: '青岛西海岸新区武夷山路店', address: '青岛市西海岸新区武夷山路165号' },
      { id: 2, longitude: 120.18553, latitude: 35.96975, name: '青岛西海岸新区武夷山路店', address: '青岛市西海岸新区武夷山路165号' },
      { id: 3, longitude: 120.18553, latitude: 35.94175, name: '青岛西海岸新区武夷山路店', address: '青岛市西海岸新区武夷山路165号' }
    ];
    point.splice(0, 0, { id: 0, longitude: long, latitude: lat });
    var mark = [];
    for (var key in point) {
      if (key === '0') {
        mark.push({
          iconPath: 'images/mark.png',
          id: point[key].id,
          longitude: point[key].longitude,
          latitude: point[key].latitude,
          width: 30,
          height: 38
        });
      } else {
        mark.push({
          iconPath: 'images/marker-bg.png',
          id: point[key].id,
          longitude: point[key].longitude,
          latitude: point[key].latitude,
          width: 21,
          height: 25,
          callout: {
            content: point[key].name + '\n' + point[key].address, //换行用'\n'
            fontSize: 14,
            bgColor: '#fff',
            borderWidth: 1,
            borderColor: '#ccc',
            display: 'BYCLICK', //ALWAYS:始终显示,BYCLICK:点击显示
            padding: 5
          }
        });
      }
      _this.setData({
        markers: mark
      });
    }
  }
})