微信小程序中使用高德地图关键词搜索以及点击位置获取位置信息
2019-11-18 本文已影响0人
虚幻的锈色
之前写了一般微信腾讯地图位置服务，小程序插件版。那个非常好用，在没发现那个之前用的是位置服务的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);
}
});
}
})
