在小程序中使用个性化地图
小程序中的map组件 ：官方文档中的map介绍
登录“微信小程序”，在小程序后台中，“开发”->“开发者工具”->“腾讯位置服务”申请开通。具体步骤参考 《小程序个性地图使用指南》
小程序个性地图的设置参考： 小程序Javascript SDK。在此获取 qqmap-wx-jssdk.min.js 文件。
遇到的问题
微信小程序的map组件的层级是最高的，当你希望在map 组件之上显示其他的标签，在模拟器上是可以的，但是显示在手机上，就只有map组件了。不是没有渲染，而是被map组件覆盖了， 因为在小程序中，map组件的优先级是最高的，即使你使用了 z-index 也无济于事。
解决方法：
微信小程序为我们提供了 cover-view 组件，可覆盖的原生组件有 map , video ，canvas ， camera ，live-player , live-pusher。
当把标签换为 cover-view 后，的确能显示在 map 组件之上。但是当需求是希望在map组件上显示一个 搜索框 时，问题又来了。因为在 cover-view 中只支持嵌套 cover-view ，cover-image ，button。
而希望显示 input ，会报如下错误：
解决思路：
在 cover-view 下写 input 标签。
将 cover-view 的高度和 input 的高度相同（假如为50px），在为 input 设置 margin-top:50px（即 cover-view 和 input 的高度），这样就会显示重叠的效果。
将 cover-view 标签中的内容和 input 中的 value 值进行绑定，即使用同一个数据，这样当用户输入需要搜素的地方时，这两个标签的内容就会同步。
关键代码：
.wxml
<cover-view id='searchDiv'>
<!-- 输入框，通过将 cover-view 中的内容和 input 标签的 value 设置相同的数据实现 -->
<cover-view bindtap='tapInput'>
<cover-view class='text'>{{key || "搜周边"}}</cover-view>
<input type="text" class='search_input' wx:value="{{key}}" placeholder='搜周边' focus='{{inputFocus}}' confirm-type="done" bindinput="set_key" bindblur='blurInput'/>
</cover-view>
<!-- 搜索图片 -->
<cover-view catchtap='search_key' class='search_icon' >
<cover-image src='/images/map/search.png'></cover-image>
</cover-view>
</cover-view>.wxss
#searchDiv{
top: 5px;
width: 80%;
margin: 0 10%;
background: rgba(255, 255, 255, 0.9);
border-radius: 5px;
box-shadow: 0px 0px 5px #E0E3E4;
position: fixed;
}
#searchDiv .text,#searchDiv .search_input,#searchDiv .search_icon{
height: 50px;
line-height: 50px;
}
#searchDiv .text{
margin-left: 20px;
}
#searchDiv .search_input{
margin-left: 20px;
/* 使视觉上和text保持一致 */
margin-top: -50px;
}
#searchDiv .search_icon{
display: inline-block;
top: 0;
position: absolute;
right: 0px;
}
#searchDiv .search_icon cover-image{
width: 30px;
height: 30px;
padding: 10px;
}.js
tapInput() {
this.setData({
// 为 input 设置获取焦点
inputFocus: true
});
},
// input 失去焦点后将 input 的输入内容给 cover-view
blurInput(e) {
this.setData({
key: e.detail.value
});
}以上是自己练习时遇到的问题和解决方法，下面附上微信小程序调用 map 组件的完整代码。
微信小程序调用 map 组件的完整代码
map.wxml
<view class='maps'>
<map
id="map"
longitude="{{longt}}"
latitude="{{lat}}"
scale="16"
controls="{{controls}}"
bindcontroltap="controltap"
markers="{{markers}}"
bindmarkertap="markertap"
polyline="{{polyline}}"
bindregionchange="regionchange"
show-location
show-compass="true"
></map>
<cover-view id='searchDiv'>
<!-- 输入框，通过将 cover-view 的内容和 input 标签的value 绑定相同的 data 实现 -->
<cover-view bindtap='tapInput'>
<cover-view class='text'>{{key || "搜周边"}}</cover-view>
<input type="text" class='search_input' wx:value="{{key}}" placeholder='搜周边' focus='{{inputFocus}}' confirm-type="done" bindinput="set_key" bindblur='blurInput'/>
</cover-view>
<!-- 搜索图片 -->
<cover-view catchtap='search_key' class='search_icon' >
<cover-image src='/images/map/search.png'></cover-image>
</cover-view>
</cover-view>
</view>map.wxss
#searchDiv{
top: 5px;
width: 80%;
margin: 0 10%;
background: rgba(255, 255, 255, 0.9);
border-radius: 5px;
box-shadow: 0px 0px 5px #E0E3E4;
position: fixed;
}
#searchDiv .text,#searchDiv .search_input,#searchDiv .search_icon{
height: 50px;
line-height: 50px;
}
#searchDiv .text{
margin-left: 20px;
}
#searchDiv .search_input{
margin-left: 20px;
/* 使视觉上和text保持一致 */
margin-top: -50px;
}
#searchDiv .search_icon{
display: inline-block;
top: 0;
position: absolute;
right: 0px;
}
#searchDiv .search_icon cover-image{
width: 30px;
height: 30px;
padding: 10px;
}
#map{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}map.js
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap/qqmap-wx-jssdk.min.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
// 登录 小程序后台，在腾讯位置服务中获取 key ,并在此处的key值中写入你的key
key: '...' // 必填
});
Page({
data: {
inputFocus: false,
key:"",
searchRes:[],
longt: 114.68308,
lat: 33.63497,
markers: [ {
iconPath: '/images/map/position.png',
id: -1,
latitude: 33.63497,
longitude: 114.68308,
width: 30,
height: 30,
title: '周口师范学院'
}],
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color: '#FF0000DD',
width: 2,
dottedLine: true
}]
},
regionchange(e) {
// console.log(e.type)
},
markertap(e) {
// console.log(e.markerId)
},
controltap(e) {
// console.log(e.controlId)
},
set_key:function(e){
this.setData({
key: e.detail.value
})
},// 事件触发，调用接口
search_key: function () {
var _this = this;
console.log(this.data.key);
if (this.data.key == '' || this.data.key == "搜周边"){
wx.showToast({
icon: 'none',
title: '请输入您要游览的地方'
});
return;
}
// 调用接口
qqmapsdk.search({
keyword: _this.data.key, //搜索关键词
location: '33.625607,114.64202', //设置周边搜索中心点
success: function (res) { //搜索成功后的回调
if(res.data.length == 0){
wx.showToast({
icon:'none',
title: '未搜索到您游览的地方'
});
return;
}
var mks = []
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 获取返回结果，放到mks数组中
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: '/images/map/position.png', //图标路径
width: 30,
height: 30
})
}
_this.setData({
markers: mks, //设置markers属性，将搜索结果显示在地图中
lat:mks[0].latitude, // 设置地图中心点的经纬度
longt:mks[0].longitude
})
},
fail: function (res) {
if (res.data.length == 0) {
wx.showToast({
icon: 'none',
title: '搜索失败'
});
return;
}
},
complete: function (res) {
console.log(res);
}
});
},
tapInput() {
this.setData({
// 为 input 设置获取焦点
inputFocus: true
});
},
// input 失去焦点后将 input 的输入内容给 cover-view
blurInput(e) {
this.setData({
key: e.detail.value
});
}
})