微信小程序+腾讯地图SDK实现地图

wxml模块

<map
  id="citymap"
  name="citymap"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  polyline="{{polyline}}"
  markers="{{markers}}"
  scale="16"
  style="width: 100%; height: 100%;"
  show-location
>	

js模块

//引入地图包
var QQMapWX = require('../../../assets/mappackage/qqmap-wx-jssdk.min.js');
var qqmapsdk;

//获取应用实例
const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    statusBarHeight: getApp().globalData.statusBarHeight,
    headText: '地图导航',
    headImage: '',
    mangFalse: true,
    infoLeft: [],
    latitude:"26.514071",
    longitude:"106.700363",
    polyline:null,
    markers:null,
    mapSearchList:[],
    inputValue:'',
    isShowList:true,
  },
  //获取搜索地理位置
  // getLocation(){
  //   var that = this;
  //   wx.getLocation({
  //     type: 'gcj02',
  //     success (res) {     
  //       const latitude = res.latitude
  //       const longitude = res.longitude
  //       const speed = res.speed
  //       const accuracy = res.accuracy
  //       that.setData({
  //         latitude:res.latitude,
  //         longitude:res.longitude,
  //       })
  //       // that.getCityinfo()
  //       console.log(that.data.latitude,that.data.longitude)
  //       console.log(latitude,longitude)
  //     }
  //    })
  // },
  getOriginPlace(e) {
    console.log(e,this.data.latitude,this.data.longitude)
    var _this = this;
    qqmapsdk.reverseGeocoder({
      //位置坐标，默认获取当前位置，非必须参数
      location:'26.514071,106.700363',
      //get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数
      success: function(res) {//成功后的回调
        console.log(res);
        var res = res.result;
        var mks = [];
        //当get_poi为0时或者为不填默认值时，检索目标位置，按需使用
        mks.push({ // 获取返回结果，放到mks数组中
          title: res.address,
          id: 0,
          latitude: res.location.lat,
          longitude: res.location.lng,
          iconPath: './images/direct_icon.png',//图标路径
          width: 25,
          height: 25,
          // callout: { //在markers上展示地址名称，根据需求是否需要
          //   content: res.address,
          //   color: '#000',
          //   display: 'ALWAYS'
          // }
        });
        _this.setData({ //设置markers属性和地图位置poi，将结果在地图展示
          markers: mks,
          poi: {
            latitude: res.location.lat,
            longitude: res.location.lng
          }
        });
      },
      fail: function(error) {
        // console.log(location)
        // console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    })
  },
  //搜索附近地址
  getNearbySearch:function(){
    var _this = this;
    // 调用接口
    qqmapsdk.search({
       keyword: this.data.inputValue,  //搜索关键词console.log(res)
       location: '26.514071,106.700363',  //设置周边搜索中心点
       success: function (res) { //搜索成功后的回调
        console.log(res)
          var mks = []
          mks.push({ // 获取返回结果，放到mks数组中
            title: res.data[0].title,
            id: res.data[0].id,
            latitude: res.data[0].location.lat,
            longitude: res.data[0].location.lng,
            iconPath: "./images/direct_icon.png", //图标路径
            width: 25,
            height: 25
          })
          _this.setData({ //设置markers属性，将搜索结果显示在地图中
            markers: mks
          })
          _this.setData({
            isShowList:true,
          })
       },
       fail: function (res) {
       },
       complete: function (res){
       }
   });
 },

  //获取input框文字
  inputTextChange(e){
    this.setData({
      inputValue: e.detail.value
    });
    console.log(this.data.inputValue)
    //在这里发送请求获取搜索的数据
    setTimeout(()=>{
      this.setData({
        isShowList:false,
        mapSearchList:[{
          title:"香港城"
        },
        {
          title:"香"
        },
        {
          title:"香香"
        },
        {
          title:"香水"
        }]
      })
    },500)
  },
  clearSearchBar(e){
    this.setData({
      inputValue: ""
    });
  },
  // getFocus(){
  //   this.setData({
  //     // isShowList: !this.data.isShowList
  //   });
  // },
  //点击每一个模糊匹配的字段进行定位
  searchStore:function(e){
    this.setData({
      inputValue:e.currentTarget.dataset.title
    })
    this.getNearbySearch()
    this.setData({
      isShowList:true
    })
    
    console.log(this.data.inputValue)
  },
  upHeade: function () {

  },

  toMapSearch(){
    wx.navigateTo({
      url:  "/mapNavigation/pages/mapsearch/mapsearch"
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    qqmapsdk = new QQMapWX({
      key: '52VBZ-X7VRQ-T5H57-GQOSY-EVEWJ-OTFJA'
  });
    if (options.mange === '0') {
      this.setData({
        mangFalse: false
      })
    }
    this.getOriginPlace()
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    qqmapsdk.geocoder({ //获取目标地址的地图信息，把详细地址输入address即可
      address: '贵阳市花溪区黄河路',
      success: function (res) {    //返回的console.log(res)数据里面有该地址的经纬度
        // console.log(res)
        console.log("接口调用成功返回的回调")
      },
      fail: function (res) {
        // console.log("接口调用失败返回的回调")
      },
      complete: function (res) {
        // console.log("接口调用结束的回调函数（调用成功、失败都会执行）")
      }
    })
  },
})

踩坑：map的层级非常高，所以不能地图上面不能家搜索框，只能单独跳转页面，实现功能。。。