1.实现效果
地图拖拽.gif2.如何使用腾讯地图sdk
2.1申请开发者密钥(key)
- 创建应用
- 添加key,这个key值就是后面在程序中用到的key值
-
选择WebSweviceApi,开启这项,才能调逆地址解析接口
在这里插入图片描述
在这里插入图片描述
2.2 WebService API
腾讯地图WebService API 是基于HTTPS/HTTP协议的数据接口,开发者可以使用任何客户端、服务器和开发语言,按照腾讯地图WebService API规范,按需构建HTTPS请求,并获取结果数据(目前支持JSON/JSONP方式返回)。
腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务
逆地址解析:https://apis.map.qq.com/ws/geocoder/v1/?location=(get请求)
- 申请开发者密钥(key):申请密钥
- 开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存 (小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
- 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1 | JavaScriptSDK v1.2
- 安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名”
中设置request合法域名,添加 https://apis.map.qq.com
2.3 在小程序中使用
// 引入SDK核心类,js文件根据自己业务,位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
onLoad: function () {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: '申请的key'
});
},
onShow: function () {
// 调用接口
qqmapsdk.search({
keyword: '酒店',
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
}
})
3.结合小程序map,实现拖拽定位
map提供事件bindanchorpointtap:点击定位标时触发,e.detail = {longitude, latitude}
视野改变时,regionchange 会触发两次,返回的 type 值分别为 begin 和 end。
2.8.0 起 begin 阶段返回 causedBy,有效值为 gesture(手势触发) & update(接口触发)
2.3.0 起 end 阶段返回 causedBy,有效值为 drag(拖动导致)、scale(缩放导致)、update(调用更新接口导致)。
3.1 逆向解析拿到地址
- 用获取到的longitude, latitude,调用腾讯地图的接口,获取到formatted_addresses.recommend,地址名称。
qqMapSdk.reverseGeocoder({
location: {
latitude: lat,
longitude: lng
},
success: (res) => {
},
fail: (res) => {
}
})
3.2 设置一个拖拽结束的小动画
- 拿到经纬度之后,为小图标添加样式动画,地址解析完成的1s之后结束动画。
@keyframes awvae {
40% {
transform: scale(1.4);
}
70% {
transform: scale(0.4);
}
100% {
transform: scale(1);
}
}
4.主要代码
<!--pages/jsCase/mapLocation/index.wxml-->
<view class="box">
<!-- 从 2.8.0 起 map 支持同层渲染
基础库2.12.2 map新增罗盘-->
<map id="maps" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" show-location bindregionchange="regionchange">
<cover-image class="cover-image {{show_ani}}" src="../img/map.png" />
</map>
<cover-view class="address_box">
<cover-view class="adress flex-row">
<cover-view class="b"></cover-view>
<cover-view class="text_ellipsis">{{address}}</cover-view>
</cover-view>
<cover-view class="adress flex-row">
<cover-view class="b d"></cover-view>
<cover-view class="text_ellipsis"> {{longitude}},{{latitude}}</cover-view>
</cover-view>
</cover-view>
</view>
/* pages/jsCase/mapLocation/index.wxss */
page {
height: 100%;
}
.box {
height: 100%;
}
map {
width: 100%;
height: 100%;
}
.cover-image {
height: 60rpx;
width: 60rpx;
position: fixed;
top: 50%;
left: 50%;
margin-top: -30rpx;
margin-left: -30rpx;
}
.address_box {
width: 710rpx;
position: fixed;
bottom: 40rpx;
left: 50%;
transform: translateX(-50%);
padding: 30rpx;
box-sizing: border-box;
background-color: #fff;
border-radius: 18rpx;
color: #555;
font-size: 28rpx;
}
.adress {
padding: 20rpx 0;
border-bottom: 1rpx solid #eaeef1;
}
.adress:last-child {
border-bottom: none;
}
.adress .b {
height: 16rpx;
width: 16rpx;
border-radius: 8rpx;
background: #5677fc;
margin-right: 20rpx;
flex-shrink: 0;
}
.adress .d {
background-color: orange;
}
.show {
animation: awvae .7s ease-in-out;
}
@keyframes awvae {
40% {
transform: scale(1.4);
}
70% {
transform: scale(0.4);
}
100% {
transform: scale(1);
}
}
import qqMapSdk from '../util/qqmap.js';
Page({
data: {
address: "正在获取地址...",
longitude: '',
latitude: '',
show_ani: ""
},
onLoad: function (options) {
this.getNowLocation()
},
getNowLocation() {
// map 组件使用的经纬度是火星坐标系,调用 wx.getLocation 接口需要指定 type 为 gcj02
wx.getLocation({
type: 'gcj02',
success: res => {
this.setData({
latitude: res.latitude,
longitude: res.longitude
})
this.getAddress(res.longitude, res.latitude);
}
})
},
regionchange(e) {
// 地图发生变化的时候,获取中间点,也就是cover-image指定的位置
if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
this.setData({
address: "正在获取地址..."
})
this.map = wx.createMapContext("maps");
this.map.getCenterLocation({
type: 'gcj02',
success: (res) => {
this.setData({
show_ani: "show",
latitude: res.latitude,
longitude: res.longitude
})
this.getAddress(res.longitude, res.latitude);
}
})
}
},
......
})
const QQMapWX = require('./qqmap-lib/qqmap-wx-jssdk.js');
const qqMapSdk = new QQMapWX({
key: '你自己的key'
});
module.exports = qqMapSdk
网友评论