uniapp接入高德地图

news2024/11/26 18:02:09

下面代码兼容安卓APP和H5 

高德地图官网:我的应用 | 高德控制台 ,绑定服务选择《Web端(JS API)》

/utils/map.js 需要设置你自己的key和安全密钥

export function myAMap() {
	return new Promise(function(resolve, reject) {
		if (typeof window.onLoadMyAMap === 'function') {
			resolve(window.onLoadMyAMap)
			return
		}
		window.onLoadMyAMap = function() {
			resolve(window.onLoadMyAMap)
		}
		window._AMapSecurityConfig = {
			securityJsCode: '你的安全密钥',
		};
		var script = document.createElement('script')
		script.type = 'text/javascript'
		script.src =
			`https://webapi.amap.com/maps?v=2.0&key=你的key&callback=onLoadMyAMap&plugin=AMap.Geocoder,AMap.AutoComplete,AMap.PlaceSearch`
		script.onerror = reject
		document.head.appendChild(script)
	})
}

页面代码

<template>
	<view class="gaodeMap">
		<view class="map" v-bind:style="{ height: windowHeight * 2 + 'rpx'}" id="container"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: "",
			}
		},
		methods: {},
		mounted() {
			//默认高度
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight;
				}
			});
		}
	}
</script>

<script module="allmap" lang="renderjs">
	import {
		myAMap
	} from "@/utils/map.js";

	let amap;
	const _window = window;

	export default {
		data() {
			return {
				latitude: 22.543648,
				longitude: 114.057923,
				zoom: 5,
			}
		},
		methods: {
			//获取地图信息
			initMap() {
				myAMap().then(() => {
					// 创建地图实例
					amap = new AMap.Map('container', {
						zoom: 5, // 地图缩放比例
						zooms: [4, 20], // 地图缩放区间
						center: [114.057923, 22.543648], //设置经纬度为地图中心
						resizeEnable: true, // 开启地图缩放
					});

					//  设置个性化地图
					// var styleName = "amap://styles/" + 'darkblue'
					// amap.setMapStyle(styleName);

					// 地图缩放事件
					amap.on('zoomend', (e) => {

					});

					// 地图拖拽事件
					amap.on('dragend', (e) => {

					});
				})
			},
		},
		mounted() {
			this.initMap()
		},
		beforeDestroy() {
			// 离开页面销毁地图
			amap && amap.destroy();
			amap = null
		}
	}
</script>

<style lang="scss" scoped>
</style>

效果图

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

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

相关文章

三种蓝牙架构实现方案

一、蓝牙架构方案 1、hostcontroller双芯片标准架构 手机里面包含很多SoC或者模块&#xff0c;每颗SoC或者模块都有自己独有的功能&#xff0c;比如手机应用跑在AP芯片上&#xff0c;显示屏&#xff0c;3G/4G通信&#xff0c;WiFi/蓝牙等都有自己专门的SoC或者模块&#xff0…

下载并安装Visual Studio 2017过程

一、下载 1、下载链接 下载链接&#xff1a;官方网址 先登录 往下滑找到较早的下载 2、进行搜索下载 或者直接点击&#x1f517;网站跳转 3、确认系统信息进行下载 二、安装 下载完成后右键使用管理员身份运行 1、点击同意后安装 2、若报错—设置失败 打开控制面板-&g…

1-golang_org_x_crypto_bcrypt测试 --go开源库测试

1.实例测试 package mainimport ("fmt""golang.org/x/crypto/bcrypt" )func main() {password : []byte("mysecretpassword")hashedPassword, err : bcrypt.GenerateFromPassword(password, bcrypt.DefaultCost)if err ! nil {fmt.Println(err)…

卷积神经网络学习记录

目录 神经网络基础定义&#xff1a; 基本组成部分 工作流程 卷积层&#xff08;卷积定义&#xff09;【CONV】&#xff1a; 卷积层&#xff08;Convolutional Layer&#xff09; 特征提取&#xff1a;卷积层的主要作用是通过卷积核&#xff08;或滤波器&#xff09;运算提…

Java安全—JNDI注入RMI服务LDAP服务JDK绕过

前言 上次讲到JNDI注入这个玩意&#xff0c;但是没有细讲&#xff0c;现在就给它详细地讲个明白。 JNDI注入 那什么是JNDI注入呢&#xff0c;JNDI全称为 Java Naming and Directory Interface&#xff08;Java命名和目录接口&#xff09;&#xff0c;是一组应用程序接口&…

设计模式之 模板方法模式

模板方法模式是行为型设计模式的一种。它定义了一个算法的骨架&#xff0c;并将某些步骤的实现延迟到子类中。模板方法模式允许子类在不改变算法结构的情况下重新定义算法的某些特定步骤。 模板方法模式的核心在于&#xff1a; 封装算法的骨架&#xff1a;通过父类中的模板方…

学习threejs,使用设置bumpMap凹凸贴图创建褶皱,实现贴图厚度效果

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.MeshPhongMaterial高…

日常开发记录-正确的prop传参,reduce搭配promise的使用

日常开发记录-正确的prop传参&#xff0c;reduce搭配promise的使用 1.正确的prop传参2.reduce搭配promise的使用 1.正确的prop传参 一般会的父组件传参子组件 //父组件 <A :demodata.sync"testData" :listData.sync"testData2"></A> data ()…

RedHat 10 Beta Install

RedHat 10 beta 前言 Red Hat Enterprise Linux 10.0 Beta 附带内核版本 6.11.0,该版本为以下架构提供最低要求版本支持(括号中注明) AMD 和 Intel 64 位架构(x86-64-v3)64 位 ARM 架构(ARMv8.0-A)IBM Power Systems,小端(POWER9)64 位 IBM Z (z14)RHEL 安装程序的主…

泥石流灾害风险评估与模拟丨AI与R语言、ArcGIS、HECRAS融合,提升泥石流灾害风险预测的精度和准确性

目录 第一章 理论基础 第二章 泥石流风险评估工具 第三章 数据准备与因子提取 第四章 泥石流灾害评价 第五章 HECRAS软件的应用 第六章 操作注意事项与模型优化 泥石流灾害的频发与严重后果&#xff0c;已成为全球范围内防灾减灾工作的重大挑战。随着科技的不断进步&…

android 音效可视化--Visualizer

Visualizer 是使应用程序能够检索当前播放音频的一部分以进行可视化。它不是录音接口&#xff0c;仅返回部分低质量的音频内容。但是&#xff0c;为了保护某些音频数据的隐私&#xff0c;使用 Visualizer 需要 android.permission.RECORD_AUDIO权限。传递给构造函数的音频会话 …

汽车HiL测试:利用TS-GNSS模拟器掌握硬件性能的仿真艺术

一、汽车HiL测试的概念 硬件在环&#xff08;Hardware-in-the-Loop&#xff0c;简称HiL&#xff09;仿真测试&#xff0c;是模型基于设计&#xff08;Model-Based Design&#xff0c;简称MBD&#xff09;验证流程中的一个关键环节。该步骤至关重要&#xff0c;因为它整合了实际…

基于Boost库的搜索引擎

本专栏内容为&#xff1a;项目专栏 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;基于Boots的搜索引擎 &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&#x1f69a; &#x1f339;&#x1f339;&#x1f339;关注我带你学习编程知识…

二叉树oj题解析

二叉树 二叉树的最近公共祖先什么是最近公共祖先&#xff1f;leetcode中求二叉树中最近公共祖先解题1.解题2. 根据二叉树创建字符串 二叉树的最近公共祖先 什么是最近公共祖先&#xff1f; 最近的公共祖先指的是这一棵树中两个节点中深度最大的且公共的祖先节点就是最近祖先节…

AI赋能电商:构建高效、智能化的新零售生态

随着人工智能&#xff08;AI&#xff09;技术的不断进步&#xff0c;其在电商领域的应用日益广泛&#xff0c;从购物推荐到供应链管理&#xff0c;再到商品定价&#xff0c;AI正在全面改变传统电商的运营模式&#xff0c;并推动行业向智能化和精细化方向发展。本文将探讨如何利…

【从零开始的LeetCode-算法】43. 网络延迟时间

有 n 个网络节点&#xff0c;标记为 1 到 n。 给你一个列表 times&#xff0c;表示信号经过 有向 边的传递时间。 times[i] (ui, vi, wi)&#xff0c;其中 ui 是源节点&#xff0c;vi 是目标节点&#xff0c; wi 是一个信号从源节点传递到目标节点的时间。 现在&#xff0c;…

【数据结构】树——链式存储二叉树的基础

写在前面 书接上文&#xff1a;【数据结构】树——顺序存储二叉树 本篇笔记主要讲解链式存储二叉树的主要思想、如何访问每个结点、结点之间的关联、如何递归查找每个结点&#xff0c;为后续更高级的树形结构打下基础。不了解树的小伙伴可以查看上文 文章目录 写在前面 一、链…

泷羽sec-linux

基础之linux 声明&#xff01; 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团…

重新定义社媒引流:AI社媒引流王如何为品牌赋能?

在社交媒体高度竞争的时代&#xff0c;引流已经不再是单纯追求流量的数字游戏&#xff0c;而是要找到“对的用户”&#xff0c;并与他们建立真实的连接。AI社媒引流王通过技术创新和智能策略&#xff0c;重新定义了社媒引流的方式&#xff0c;帮助品牌在精准触达和高效互动中脱…

centos 服务器 docker 使用代理

宿主机使用代理 在宿主机的全局配置文件中添加代理信息 vim /etc/profile export http_proxyhttp://127.0.0.1:7897 export https_proxyhttp://127.0.0.1:7897 export no_proxy"localhost,127.0.0.1,::1,172.171.0.0" docker 命令使用代理 例如我想在使用使用 do…