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地图上显示多个酷炫动态的标点,头像后端传过来,真机测试有效的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/867909

相关文章

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

SpringBoot如何通过Map实现策略模式

《SpringBoot如何通过Map实现策略模式》策略模式是一种行为设计模式,它允许在运行时选择算法的行为,在Spring框架中,我们可以利用@Resource注解和Map集合来优雅地实现策略模式,这... 目录前言底层机制解析Spring的集合类型自动装配@Resource注解的行为实现原理使用直接使用M

C++ 各种map特点对比分析

《C++各种map特点对比分析》文章比较了C++中不同类型的map(如std::map,std::unordered_map,std::multimap,std::unordered_multima... 目录特点比较C++ 示例代码 ​​​​​​代码解释特点比较1. std::map底层实现:基于红黑

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

一文教你PyCharm如何有效地添加源与库

《一文教你PyCharm如何有效地添加源与库》在使用PyCharm进行Python开发的时候,很多时候我们需要添加库或者设置源,下面我们就来和大家详细介绍一下如何在PyCharm中添加源和库吧... 在使用PyCharm进行python开发的时候,很多时候我们需要添加库或者设置源。这些操作可以帮助我们更方便

Python实现合并与拆分多个PDF文档中的指定页

《Python实现合并与拆分多个PDF文档中的指定页》这篇文章主要为大家详细介绍了如何使用Python实现将多个PDF文档中的指定页合并生成新的PDF以及拆分PDF,感兴趣的小伙伴可以参考一下... 安装所需要的库pip install PyPDF2 -i https://pypi.tuna.tsingh

OpenManus本地部署实战亲测有效完全免费(最新推荐)

《OpenManus本地部署实战亲测有效完全免费(最新推荐)》文章介绍了如何在本地部署OpenManus大语言模型,包括环境搭建、LLM编程接口配置和测试步骤,本文给大家讲解的非常详细,感兴趣的朋友一... 目录1.概况2.环境搭建2.1安装miniconda或者anaconda2.2 LLM编程接口配置2

使用Folium在Python中进行地图可视化的操作指南

《使用Folium在Python中进行地图可视化的操作指南》在数据分析和可视化领域,地图可视化是一项非常重要的技能,它能够帮助我们更直观地理解和展示地理空间数据,Folium是一个基于Python的地... 目录引言一、Folium简介与安装1. Folium简介2. 安装Folium二、基础使用1. 创建

mybatis-plus 实现查询表名动态修改的示例代码

《mybatis-plus实现查询表名动态修改的示例代码》通过MyBatis-Plus实现表名的动态替换,根据配置或入参选择不同的表,本文主要介绍了mybatis-plus实现查询表名动态修改的示... 目录实现数据库初始化依赖包配置读取类设置 myBATis-plus 插件测试通过 mybatis-plu

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac