之前写了一般微信腾讯地图位置服务，小程序插件版。那个非常好用，在没发现那个之前用的是位置服务的js版的。 不展示效果了，因为我改成用位置服务插件版了。

我做的是点击跳转到地图页，然后从地图页携带数据返回。 里面有搜索框，以及点击地图，获取地图的经纬度，然后传给腾讯位置服务的api获取返回的位置信息。

自己去官网下载 js文件 我放在 libs/qqmap-wx-jssdk.js

官网地址：https://lbs.qq.com/qqmap_wx_jssdk/method-getsuggestion.html

关键词搜索：qqmapsdk.getSuggestion() 经纬度反查位置：qqmapsdk.reverseGeocoder()

1、poimap.wxml

注：如果在地图上面浮动东西， 因为地图层级原因，需要专门用 cover-view ！！！！

<!--pages/poimap/poimap.wxml-->
<view class="container">
  <!--绑定输入事件-->
  <input class="input" auto-focus placeholder="请输入···" bindinput="getsuggest" value="{{backfill}}"></input>
  <map class='map' longitude="{{longitude}}" latitude="{{latitude}}" scale="16" bindtap="clickMap" markers="{{markers}}" show-location>
    <cover-view class="input-panel">
      <!--关键词输入提示列表渲染-->
      <cover-view class="sel-item" wx:for="{{suggestion}}" wx:key="index" >
          <!--绑定回填事件-->
          <cover-view bindtap="backfill" data-id="{{index}}">
            <!--渲染地址title-->
            <cover-view >{{item.title}}</cover-view>
            <!--渲染详细地址-->
            <cover-view style="font-size:24rpx;color:#666;">{{item.addr}}</cover-view>
          </cover-view>
      </cover-view>
    </cover-view>
    <cover-view class="btn-panel">
      <cover-view class="button" bindtap='onClickDefine' type="default">确定</cover-view>
    </cover-view>
  </map>
  
</view>

2、poimap.wxss

/* pages/poimap/poimap.wxss */
.input{
  margin:4rpx 10rpx;
  border:1px solid #ccc;
  height:70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  border-radius: 10rpx;
  background-color: #fff;
  padding:0 20rpx;
}
.map{
  width:100%;
  height:calc( 100% - 70rpx );
}
.map .input-panel{
  position: absolute;
  left:10rpx;
  top:0;
  width:calc( 100% - 20rpx );
  min-height: 10rpx;
  font-size: 26rpx;
}
.input-panel .sel-item{
  min-height: 60rpx;
  padding:6rpx 20rpx;
  background-color: #fff;
  border-bottom: 1rpx dashed #ccc;
  z-index: 10000;
}
.map .btn-panel{
  position: absolute;
  left:10rpx;
  bottom:70rpx;
  width:calc( 100% - 20rpx );
  height:90rpx;
}
.btn-panel .button{
  height:90rpx;
  line-height: 90rpx;
  border:none;
  letter-spacing: 5rpx;
  font-size: 32rpx;
  color:#fff;
  text-align: center;
  border-radius: 10rpx;
  background-color: #33b5e5;
}

3、poimap.js

// pages/poimap/poimap.js

//公用函数
const Common = require("../../utils/common.js");
const QQMapWX = require("../../libs/qqmap-wx-jssdk.js");
var qqmapsdk;
//获取应用实例
const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    img_server_url: app.globalData.img_server_url,
    latitude: 22.533773,
    longitude: 114.057678,
    markers: [],
    polyline: [],
    controls: [],
    //关键词搜索
    suggestion:[],
    selItem:null,
    type:'',
    backfill:''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'YPNBZ-PMSCX-G664V-7XBWG-SYFB6-KRBUO'
    });
    
  this.getLocation();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  clickMap(e) {
    var poi = e.detail;
    this.reverseGeocoder(poi.latitude + ',' + poi.longitude, this);
  },
  // 获取当前位置
  getLocation(){
    var me = this;
    wx.getLocation({
      type: 'wgs84',//wgs84 gcj02
      // altitude:true,
      success: function (res) {
        me.setData({
          latitude: res.latitude,
          longitude: res.longitude
        });
        me.reverseGeocoder(res.latitude + ',' + res.longitude, me);
      },
      fail: function (e) {
        console.log(e);
      }
    });
  },
  //根据经纬度获取位置
  reverseGeocoder(location, me) {
    wx.showLoading({
      title: '加载中···',
      mask: true
    });
    qqmapsdk.reverseGeocoder({
      location: location,
      success: function (res) {//成功后的回调
        var result = res.result;
        var title = result.formatted_addresses.recommend;
        title=title.replace(/\([^\)]*\)/g, "");
        var selItem  = { // 获取返回结果，放到sug数组中
          title: title,
          addr: result.address,
          province: result.ad_info.province,
          city: result.ad_info.city,
          adcode: result.ad_info.adcode,
          district: result.ad_info.district,
          latitude: result.location.lat,
          longitude: result.location.lng,
        };
        var markers = []; 
        markers.push({
          iconPath: "../../images/poi_icon.png",
          latitude: result.location.lat,
          longitude: result.location.lng,
          width: 22,
          height: 32
        });
        me.setData({
          backfill: title,
          markers: markers,
          selItem: selItem
        });
        wx.hideLoading()
      },
      fail: function (error) {
        console.error(error);
      }
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },
  //数据回填方法
  backfill: function (e) {
    var id = e.currentTarget.dataset.id;
    var selItem;
    for (var i = 0; i < this.data.suggestion.length; i++) {
      if (i == id) {
        selItem = this.data.suggestion[i];
        this.setData({
          backfill: this.data.suggestion[i].title
        });
        break;
      }
    }
    var markers=[];
    markers.push({
      iconPath: "../../images/poi_icon.png",
      longitude: selItem.longitude,
      latitude: selItem.latitude,
      width: 22,
      height: 32
    });
    this.setData({
      markers: markers,
      longitude: selItem.longitude,
      latitude: selItem.latitude,
      suggestion:[],
      selItem: selItem
    });
  },
  // 点击确定
  onClickDefine() {
      // 这个地方给该赋值的数据赋值既可。在这个地方把数据给全局变量既可
    app.globalData.address_name = selItem.title;
  app.globalData.address = selItem.addr;
  app.globalData.address_poi = selItem.latitude + ',' + selItem.longitude;
    wx.navigateBack({
      delta: 1
    });
  },
  //触发关键词输入提示事件
  getsuggest: function (e) {
    var _this = this;
    var location = this.data.latitude + ',' + this.data.longitude;
    var keyword = e.detail.value.replace(/\s+/g, '');
    if (keyword==""){
      return;
    }
    //调用关键词提示接口
    qqmapsdk.getSuggestion({
      //获取输入框值并设置keyword参数
      keyword: keyword, //用户输入的关键词，可设置固定值,如keyword:'KFC'
      location: location,
      region:'深圳', //设置城市名，限制关键词所示的地域范围，非必填参数
      success: function (res) {//搜索成功后的回调
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            province: res.data[i].province,
            city: res.data[i].city,
            adcode: res.data[i].adcode,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        //设置suggestion属性，将关键词搜索结果以列表形式展示
        _this.setData({
          suggestion: sug
        });
      },
      fail: function (error) {
        console.error(error);
      }
    });
  }
})