今天和大家分享一下在做小程序的过程中遇到的地图的定位问题。
首先呢我列出来了三个市面上比较常用的且都针对小程序集成了sdk的三家免费的地图大亨，对没错，分别是腾讯，阿里，百度。这里说明一下阿里前段时间以最大的股份入股高德。所以大家也可看到市场上使用高德地图的app基本上都是阿里旗下的app。
恩，到这，就和大家分享一下为什么使用腾讯地图，咳咳，整理一下领带，因为腾讯是小程序的爸爸。
下面这张图是我做了一个简单的表格供大家参考参考。
从上图大家还是挺容易看得出各个地图的功能其实都类似，也可以看到两遍倒的趋势，腾讯用腾讯的，阿里用阿里的。换句话说就是高德是阿里的，大家可以去网上搜一下高德现在最大的股东是谁就知道了。还有个比较注意的问题，就是接口调用量配额的问题。什么叫接口用量配额呢，简单来说是各大地图服务平台暴露出来供开发者调用的接口的使用次数。下面这张图是我找了一些资料统计出来的，有官方给出的，有各大社区使用者给出的，仅供参考。
腾讯：
百度：
http://lbsyun.baidu.com/index.php?title=jspopular/qa
同一个开发者账号下的所有应用共用2000次一天
https://lbs.amap.com/faq/top/notice/developer_type
高德：
可以看得出来，高德地图给出的参考还是最有参考价值的。每家地图平台接口用量都是以key和天为单位的，天不用多说，对于一些新手来讲对key还是有点陌生。我这边就简单解释一下。
三家开发商并没有开放游客模式，供大家随意使用，一定要大家去各家地图服务平台注册一个开发者权限，具体的注册方法这里不赘述，网上都有。注册完了之后会生成一个key，这个key就是用来调用接口的key。像这样：
//实例化腾通地图sdk
qqmapsdk = new QQMapWX({
key: 'K****-****-*****-*****-*****-*****' //这里自己的key秘钥进行填充
});在我们实例化腾讯地图用例的时候用到的，相当于登录一系统的一个用户，这里的key相当于就是调用sdk的用户id。总之来讲呢，注册了才有使用接口的权限。
因为我在项目里使用的腾讯地图，这里呢就以腾讯地图的使用方法为例，以供大家作为参考。这个js文件从腾讯地图服务平台下载下来。
然后再将对应的js文件require进来。
就是这么简单，然后大家根据官网上提供的api使用啦。
这里给大家先看一波案例效果。我这里做了一个获取定位，还做了一个定位地址反显到上一个页面。
很遗憾，没有录个gif给大家，希望大家见谅。这里先贴出代码。
<!--pages/map/index.wxml-->
<view class="select_area">
<image class="selectImg" src="/images/icon_search.png"></image>
<input class="address_content" type="text" placeholder='搜索地点' bindchange='wxSearchTab'></input>
</view>
<map class="map_area" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" bindcontroltap="controltap" markers="{{markers}}">
</map>
<scroll-view class="place_around" scroll-y="true">
<block wx:for="{{aroundPlaces}}" wx:key="{{index}}">
<view class="place_container" bindtap='selectAddress' data-num="{{index}}" data-location="{{item.location}}" data-address="{{item.address}}">
<view class="place_content">
<view class="place_title">{{item.title}}</view>
<view class="place_address">{{item.address}}</view>
</view>
<text class="isSelected">{{index==curr_inx?'✔️':''}}</text>
</view>
<view class="person-line"></view>
</block>
</scroll-view>
<!--悬浮于底部的按钮-->
<view class="next_btn">
<btn fill-up="fill-up"
content = "确定"
backgroundColor = "#628AE3"
color = "#ffffff"
bindtap="confirm"
></btn>
</view>/* pages/map/index.wxss */
.select_area{
display: flex;
flex-direction: row;
width:97%;
align-items: center;
background-color: #ffffff;
margin: 10rpx 10rpx 0 10rpx;
height: 50rpx;
}
.map_area{
position: absolute;
top: 70rpx;
width: 100%;
height: 500rpx;
}
.selectImg{
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
margin-left: 20rpx;
}
.address_content{
font-size: 24rpx;
width: 90%;
}
.place_around{
position: fixed;
bottom: 0;
height: 600rpx;
width: 100%;
overflow-y: scroll;
justify-content: space-between;
}
.place_container{
display: flex;
flex-direction: row;
background-color: #ffffff;
padding: 10rpx 20rpx 10rpx 20rpx;
align-items: center;
justify-content: space-between;
}
.place_content{
display: flex;
flex-direction: column;
}
.place_title{
font-size: 24rpx;
}
.place_address{
color:#C4C4C4;
font-size: 18rpx;
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
/*到第几行开始省略*/
-webkit-line-clamp: 1;
}
.confirm{
font-size: 24rpx;
color: #628AE3
}
/*分割线*/
.person-line {
width: 100%;
height: 2rpx;
background: #F4f4f4;
}
.next_btn{
position:fixed;
bottom: 0;
width:100%;
z-index: 101 !important;
}
.fill-up{
width:100% !important;
height:60rpx !important;
border-radius: 0em !important;
}// pages/map/index.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
/**
* 页面的初始数据
*/
data: {
longitude: 121.29,
latitude: 31.11,
aroundPlaces:[],
curr_inx:0,
markers: [{
longitude: 121.29,
latitude: 31.11,}] ,
confirmAddress:"",
},
confirm:function(){
//现获取到所有页面，然后拿到当前页面的上一个页面[注意length-2的含义]
let vm = this,pages = getCurrentPages(),prePage = pages[pages.length-2];
//这里的prepage就是上一个页面的this，returnAddress属性一定要在上一个页面的data里事先定义。
prePage.setData({returnAddress: vm.data.confirmAddress})
wx.navigateBack();
},
// 搜索入口
wxSearchTab: function (e) {
let vm = this;
qqmapsdk.getSuggestion({
keyword: e.detail.value || '',
success: function(res){
vm.setData({
aroundPlaces:res.data,
confirmAddress: res.data[0].address
});
},
fail: function(res){
console.log(res)
}
});
},
selectAddress: function(e){
let vm = this, lat = e.currentTarget.dataset.location.lat, lng = e.currentTarget.dataset.location.lng;
vm.setData({
latitude: lat,
longitude: lng,
markers: [{ longitude: lng, latitude: lat }],
curr_inx: e.target.dataset.num,
confirmAddress: e.target.dataset.address
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//实例化腾通地图sdk
qqmapsdk = new QQMapWX({
key: 'K****-Z****-N****-X****-B****-R****' //这里自己的key秘钥进行填充
});
let pageParam = options,vm = this;
//获取上个页面定位，以便在地图上mark
if (pageParam.latitude && pageParam.longitude){
vm.setData({
latitude: pageParam.latitude,
longitude: pageParam.longitude
});
}
//页面加载是获取当前地点，并调用获取周边地点的api，显示位置列表
qqmapsdk.getSuggestion({
keyword: pageParam.returnAddress|| '',
success: function (res) {
vm.setData({
aroundPlaces: res.data ,
confirmAddress: res.data[0].address});
},
fail: function (res) {
console.log(res)
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
}){
"navigationBarTitleText": "确认地点",
"usingComponents": {
"btn": "/components/btn/index"
}
}这里json引用的btn是自己封装的btn组件，不要见怪。
其中遇到一个比较恶心的问题，就是腾讯地图的map组件是原生组件，层级最高，无法通过index来更改map组件的层级。但是也有解决的办法，就是cover-view组件，大家可以去网上找一下相关知识。但是cover-view还有个坑就是，在原生控件cover-view作为父容器时，不能使用其他控件嵌套作为子元素，只能使用cover类的控件。
所以大家在很多情况下都是需要在地图上添加按钮，搜索框什么的，这种用cover-view组件处理起来还是有点麻烦的。
以上是鄙人在做项目时在选择地图sdk做了哪些功课，以及使用过程中遇到的问题。
感谢大神光临，沙发伺候。。。