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> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/786204.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【了解下YOLO系列】

&#x1f308;个人主页:程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

在课堂中使用 ChatGPT 的 80 个方式(上)

原文&#xff1a;80 Ways to Use ChatGPT in the Classroom 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第一章&#xff1a;介绍 chatGPT 于 2022 年 11 月崭露头角。它已经开始颠覆高等教育等行业和企业&#xff0c;类似于印刷机和互联网。在核心上&#xff0c;c…

【虚幻引擎】C++ slate全流程开发教程

本套课程介绍了使用我们的虚幻C去开发我们的编辑器&#xff0c;扩展我们的编辑器&#xff0c;设置我们自定义样式&#xff0c;Slate架构设计&#xff0c;自定义我们的编辑器样式&#xff0c;从基础的Slate控件到我们的布局&#xff0c;一步步的讲解我们的的Slate基础知识&#…

org.junit.runners.model.InvalidTestClassError:1. No runnable methods

你们好&#xff0c;我是金金金。 场景 很简单的一个测试方法 我的boot版本&#xff1a;2.7.18 依赖 报错信息 排查 看报错信息提示无效的测试类&#xff0c;没有可运行的方法 看了下依赖信息&#xff0c;引入spring-boot-starter-test依赖也自动的引入了juni5依赖&#xff0…

ssm014基于JSP的乡镇自来水收费系统+jsp

乡镇自来水收费系统的设计与实现 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对乡镇自来水收费信息管理混乱&…

bash例子-source进程替换、alias不生效处理

#1. source 例子&#xff0c; 进程替换source <(echo alias zls"ls") #上一行 中 echo替换为cat&#xff0c;则得到如下行, 好处是 cat不用处理引号转义问题&#xff0c;而echo则必须处理引号转义问题#写一段复杂脚本&#xff0c;且 不处理引号转义问题 &#x…

『Apisix安全篇』APISIX 加密传输实践:SSL/TLS证书的配置与管理实战指南

&#x1f4e3;读完这篇文章里你能收获到 &#x1f31f; 了解SSL/TLS证书对于网络通信安全的重要性和基础概念。&#x1f527; 掌握在APISIX中配置SSL/TLS证书的基本步骤和方法。&#x1f4dd; 学习如何通过修改监听端口&#xff0c;使HTTPS请求更加便捷。&#x1f6e0;️ 认识…

【转载】OpenCV ECC图像对齐实现与代码演示(Python / C++源码)

发现一个有很多实践代码的git 库,特记录下: 地址:GitHub - luohenyueji/OpenCV-Practical-Exercise: OpenCV practical exercise 作者博客地址:https://blog.csdn.net/LuohenYJ 已关注。 Items项目Resources1age_gender1基于深度学习识别人脸性别和年龄Model2OpenCV_dlib_…

蓝桥杯刷题--python-35-二维记忆搜索有向图中最大环

0小朋友崇拜圈 - 蓝桥云课 (lanqiao.cn) sys.setrecursionlimit(1000000) # 请在此输入您的代码 nint(input()) w[0]list(map(int,input().split())) used[[0,0] for i in range(n1)] def dfs(k): global cnt if used[k][0] and used[k][1]: return if used[k][0] and not use…

CSS3 Transform变形理解与应用

Transform&#xff1a;对元素进行变形&#xff1b; Transition&#xff1a;对元素某个属性或多个属性的变化&#xff0c;进行控制&#xff08;时间等&#xff09;&#xff0c;类似flash的补间动画。但只有两个关键贞。开始&#xff0c;结束。 Animation&#xff1a;对元素某个属…

Samtec连接器 | 应用分享C-V2X技术在汽车领域的应用

【前言】 在汽车设计领域有一个新的缩写&#xff0c;就是C-V2X。被谈及时&#xff0c;这被称为车辆到X&#xff0c;有时也被称为车辆到万物。前面的 "C "代表蜂窝网络。 这些缩写代表最新的基于车辆应用利用蜂窝通讯网络的电子产品。特别是&#xff0c;正在推出的5G…

电脑win10系统更新后开机很慢,更新win10后电脑开机怎么变慢了

很多用户反映&#xff0c;更新win10后电脑开机怎么变慢了呢?现在动不动就要30几秒&#xff0c;以前都是秒开机的&#xff0c;要怎么设置才能提高开机速度?小伙伴们别着急&#xff0c;主要原因可能是关机设置中没有勾选启用快速启动&#xff0c;或者是开机启动设置的问题&…

实验04_OSPF&RIP选路实验

实验拓扑 IP地址规划 拓扑中的 IP 地址段采用&#xff1a;172.16.AB.X/24。其中 AB 为两台路由器编号组合&#xff0c;例如&#xff1a;R3-R6 之间的 AB 为 36&#xff0c;X 为路由器编号&#xff0c;例如R3 的 X3所有路由器都有一个 loopback 0 接口&#xff0c;地址格式为&…

力扣爆刷第109天之CodeTop100五连刷31-35

力扣爆刷第109天之CodeTop100五连刷31-35 文章目录 力扣爆刷第109天之CodeTop100五连刷31-35一、56. 合并区间二、124. 二叉树中的最大路径和三、19. 删除链表的倒数第 N 个结点四、72. 编辑距离五、93. 复原 IP 地址 一、56. 合并区间 题目链接&#xff1a;https://leetcode.…

在小程序中使用formdata上传数据,可实现多文件上传

1.下载formdata GitHub - zlyboy/wx-formdata: 在小程序中使用formdata上传数据&#xff0c;可实现多文件上传 2. 前端页面 <uni-collapse classcollapse refcollapse><uni-collapse-item v-for"(item, index) in attachmentList":key"index":ti…

【大数据存储】实验1 Hadoop伪分布式安装

实验1 Hadoop伪分布式安装 下载安装虚拟机软件Vmware&#xff0c;下载Ubuntu镜像文件&#xff0c;安装Ubuntu虚拟机 在Ubuntu系统中创建用户 已有用户prx17 更新APT,安装vim 使用vim创建并编辑一个文件 vim hello.c &#xff08;按o键进入编辑模式&#xff09; 源程序 #i…

C# WPF编程-Application类(生命周期、程序集资源、本地化)

C# WPF编程-Application类 应用程序的生命周期创建Application对象应用程序的关闭方式应用程序事件 Application类的任务显示初始界面处理命令行参数访问当前Application对象在窗口之间进行交互 程序集资源添加资源检索资源pack URI内容文件 本地化构建能够本地化的用户界面 每…

蓝桥杯23年第十四届省赛-整数删除|STL优先队列、双向链表

题目链接&#xff1a; 蓝桥杯2023年第十四届省赛真题-整数删除 - C语言网 (dotcpp.com) 0整数删除 - 蓝桥云课 (lanqiao.cn) 学习&#xff1a;蓝桥杯真题讲解&#xff1a;整数删除_蓝桥杯整数删除 c语言-CSDN博客 说明&#xff1a; 在暴力做法里面&#xff0c;每次都要花费…

基于神经网络的人脸识别系统的设计与实现

基于神经网络的人脸识别系统的设计与实现 摘要&#xff1a; 随着计算技术的快速发展&#xff0c;人脸识别已成为身份验证、安全监控等领域的关键技术。本文旨在设计并实现一个基于神经网络的人脸识别系统&#xff0c;该系统能够自动地从输入图像中检测和识别出人脸。论文首先介…

GPT-4智能体:迈向GPT-5的跳板

来自&#xff1a;鸵傲科技开发 在当今这个信息爆炸的时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的速度发展&#xff0c;其中自然语言处理&#xff08;NLP&#xff09;领域尤为引人注目。GPT系列模型&#xff0c;作为NLP领域的佼佼者&#xff0c;其每…