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

相关文章

Java程序进程起来了但是不打印日志的原因分析

《Java程序进程起来了但是不打印日志的原因分析》:本文主要介绍Java程序进程起来了但是不打印日志的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java程序进程起来了但是不打印日志的原因1、日志配置问题2、日志文件权限问题3、日志文件路径问题4、程序

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

如何解决idea的Module:‘:app‘platform‘android-32‘not found.问题

《如何解决idea的Module:‘:app‘platform‘android-32‘notfound.问题》:本文主要介绍如何解决idea的Module:‘:app‘platform‘andr... 目录idea的Module:‘:app‘pwww.chinasem.cnlatform‘android-32

MySQL中动态生成SQL语句去掉所有字段的空格的操作方法

《MySQL中动态生成SQL语句去掉所有字段的空格的操作方法》在数据库管理过程中,我们常常会遇到需要对表中字段进行清洗和整理的情况,本文将详细介绍如何在MySQL中动态生成SQL语句来去掉所有字段的空... 目录在mysql中动态生成SQL语句去掉所有字段的空格准备工作原理分析动态生成SQL语句在MySQL

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作(一)微信支付商户平台配置(二)Spring Boot项目搭建(三)配置文件

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,:本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步:动态库生成(vs2017+qt5.12.10)第二步:Java调用C++

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》:本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点:switch中的生成我们的label事件接着,

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S