之前寫了一般微信騰訊地圖位置服務(wù)，小程序插件版。那個(gè)非常好用，在沒(méi)發(fā)現(xiàn)那個(gè)之前用的是位置服務(wù)的js版的。 不展示效果了，因?yàn)槲腋某捎梦恢梅?wù)插件版了。

我做的是點(diǎn)擊跳轉(zhuǎn)到地圖頁(yè)，然后從地圖頁(yè)攜帶數(shù)據(jù)返回。 里面有搜索框，以及點(diǎn)擊地圖，獲取地圖的經(jīng)緯度，然后傳給騰訊位置服務(wù)的api獲取返回的位置信息。

自己去官網(wǎng)下載 js文件 我放在 libs/qqmap-wx-jssdk.js

官網(wǎng)地址：https://lbs.qq.com/qqmap_wx_jssdk/method-getsuggestion.html

關(guān)鍵詞搜索：qqmapsdk.getSuggestion() 經(jīng)緯度反查位置：qqmapsdk.reverseGeocoder()

1、poimap.wxml

注：如果在地圖上面浮動(dòng)?xùn)|西， 因?yàn)榈貓D層級(jí)原因，需要專門用 cover-view ?。。。?/h5>

<!--pages/poimap/poimap.wxml-->
<view class="container">
  <!--綁定輸入事件-->
  <input class="input" auto-focus placeholder="請(qǐng)輸入···" 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">
      <!--關(guān)鍵詞輸入提示列表渲染-->
      <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>
            <!--渲染詳細(xì)地址-->
            <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

//公用函數(shù)
const Common = require("../../utils/common.js");
const QQMapWX = require("../../libs/qqmap-wx-jssdk.js");
var qqmapsdk;
//獲取應(yīng)用實(shí)例
const app = getApp();

Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    img_server_url: app.globalData.img_server_url,
    latitude: 22.533773,
    longitude: 114.057678,
    markers: [],
    polyline: [],
    controls: [],
    //關(guān)鍵詞搜索
    suggestion:[],
    selItem:null,
    type:'',
    backfill:''
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {
    // 實(shí)例化API核心類
    qqmapsdk = new QQMapWX({
      key: 'YPNBZ-PMSCX-G664V-7XBWG-SYFB6-KRBUO'
    });
    
  this.getLocation();
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
   */
  onReady: function () {

  },
  clickMap(e) {
    var poi = e.detail;
    this.reverseGeocoder(poi.latitude + ',' + poi.longitude, this);
  },
  // 獲取當(dāng)前位置
  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);
      }
    });
  },
  //根據(jù)經(jīng)緯度獲取位置
  reverseGeocoder(location, me) {
    wx.showLoading({
      title: '加載中···',
      mask: true
    });
    qqmapsdk.reverseGeocoder({
      location: location,
      success: function (res) {//成功后的回調(diào)
        var result = res.result;
        var title = result.formatted_addresses.recommend;
        title=title.replace(/\([^\)]*\)/g, "");
        var selItem  = { // 獲取返回結(jié)果，放到sug數(shù)組中
          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);
      }
    })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  onShow: function () {
    
  },
  //數(shù)據(jù)回填方法
  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
    });
  },
  // 點(diǎn)擊確定
  onClickDefine() {
      // 這個(gè)地方給該賦值的數(shù)據(jù)賦值既可。在這個(gè)地方把數(shù)據(jù)給全局變量既可
    app.globalData.address_name = selItem.title;
  app.globalData.address = selItem.addr;
  app.globalData.address_poi = selItem.latitude + ',' + selItem.longitude;
    wx.navigateBack({
      delta: 1
    });
  },
  //觸發(fā)關(guān)鍵詞輸入提示事件
  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;
    }
    //調(diào)用關(guān)鍵詞提示接口
    qqmapsdk.getSuggestion({
      //獲取輸入框值并設(shè)置keyword參數(shù)
      keyword: keyword, //用戶輸入的關(guān)鍵詞，可設(shè)置固定值,如keyword:'KFC'
      location: location,
      region:'深圳', //設(shè)置城市名，限制關(guān)鍵詞所示的地域范圍，非必填參數(shù)
      success: function (res) {//搜索成功后的回調(diào)
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 獲取返回結(jié)果，放到sug數(shù)組中
            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
          });
        }
        //設(shè)置suggestion屬性，將關(guān)鍵詞搜索結(jié)果以列表形式展示
        _this.setData({
          suggestion: sug
        });
      },
      fail: function (error) {
        console.error(error);
      }
    });
  }
})