展示效果
二、引入地图
如果需要搜索需要去腾讯地图官网上看文档，找到对应的内容
1.申请开发者密钥（key）：申请密钥
2.开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
3.下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 、 JavaScriptSDK v1.2
4.安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com
5.小程序官方示例
// 引入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);
}
});
}
})
完整代码
<template>
<view class="map-wrap">
<!-- 1. markers ：标记点
2.latitude ：纬度
3.longitude:经度
4. scale：：搜房级别 默认16
5. @markertap：点击标记点触发
-->
<map class="map" :markers="markers" :latitude="latitude"
:longitude="longitude" :scale="16" @markertap="markertap">
<cover-view slot="callout">
<block v-for="(item, index) in customCalloutMarkerIds" :key="index">
<!-- 覆盖在原本的节点上面 -->
<cover-view class="customCallout" :marker-id="item">
<!-- 覆盖正在原本节点的文本 -->
<cover-view class="txt">{{markers[index].locationName}}</cover-view>
<!-- 覆盖正在原本节点的图片 -->
<cover-image :src="markersImgs[index]" class="content-image"></cover-image>
</cover-view>
</block>
</cover-view>
<!-- <view class="floor">
</view> -->
</map>
</view>
</template>
<script>
export default {
data() {
return {
// 中心的经纬度
latitude: 34.788195,
longitude: 113.685064,
// 播放对应的视频
videos:[
"https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4",
"https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4",
],
// 气泡显示的照片
markersImgs: [
'https://img1.baidu.com/it/u=426464644,1372554843&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=570',
"https://img1.baidu.com/it/u=3269176678,389813562&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
],
customCalloutMarkerIds: [1, 2],// 地图markers ID列表
// 数据
markers: [{
id: 1,
latitude: 34.788195,
longitude: 113.685064,
iconPath: '/static/location.png',
width: 32 ,
height: 32 ,
// locationName: '动物园',
customCallout: {
anchorY: -4,
anchorX: 0,
while:100,
height:100,
display: 'ALWAYS', // BYCLICK 点击显示气泡 ALWAYS常显示
}
}, {
id: 2,
latitude: 34.787256,
longitude: 113.673733,
iconPath: '/static/location.png',
width: 32,
height: 32,
locationName: '河南省博物院',
customCallout: {
anchorY: -4,
anchorX: 0,
display: 'ALWAYS',
}
}],
}
},
methods: {
// 点击时间点击当前的标点
markertap(e) {
let markers = this.markers
markers.find((item, index)=> {
if (item.id == e.markerId) {
this.curVideo = this.videos[index];
item.customCallout.display = 'ALWAYS' // 点击marker 显示地点名
item.width = 32 * 1.5;
item.height = 32 * 1.5;
} else {
item.customCallout.display = 'NONE';
item.width = 32;
item.height = 32;
}
})
}
}
}
</script>
<style lang="scss">
video{
position: fixed;
right:10%;
bottom:20rpx;
width: 80%;
height:200rpx;
}
.map-wrap{
width: 100%;
height: 100%;
position: absolute;
.map{
width: 100%;
height:100%;
}
}
.customCallout {
width: 200rpx;
height: 100rpx;
background-color: #fff;
background: #FFFFFF;
box-shadow: 0px 8rpx 32rpx 0px rgba(189, 191, 193, 0.4);
border-radius: 10rpx;
// padding: 6rpx 24rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
.content-image {
width: 100%;
height: 100%;
// margin-left: 10rpx;
}
.txt{
font-size: 32rpx;
}
}
.floor{
width: 90%;
height: 10%;
display: flex;
position: absolute;
background-color: #fff;
position: absolute;
bottom: 100rpx;
}
</style>