uniapp 小程序和app map地图上显示多个酷炫动态的标点，头像后端传过来，真机测试有效

本文主要是介绍uniapp 小程序和app map地图上显示多个酷炫动态的标点，头像后端传过来，真机测试有效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

展示效果

二、引入地图

如果需要搜索需要去腾讯地图官网上看文档，找到对应的内容
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：：搜房级别 默认165. @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.markersmarkers.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> 

这篇关于uniapp 小程序和app map地图上显示多个酷炫动态的标点，头像后端传过来，真机测试有效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---