展示效果

二、引入地图

如果需要搜索需要去腾讯地图官网上看文档，找到对应的内容
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>