uniapp接入高德地图

下面代码兼容安卓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>

效果图

相关推荐
2501_916008892 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
iOS阿玮3 小时前
喜欢做马甲包的有福了~现在多了一招续费方式!
uni-app·app·apple
_AaronWong6 小时前
一键搞定UniApp WiFi连接!这个Vue 3 Hook让你少走弯路
前端·微信小程序·uni-app
2501_9159090615 小时前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
赵庆明老师19 小时前
Uniapp微信小程序开发:微信小程序支付功能后台代码
微信小程序·小程序·uni-app
曹申阳19 小时前
1. 使用VSCode开发uni-app环境搭建
ide·vscode·uni-app
雪芽蓝域zzs21 小时前
uniapp开发 APP嵌入另一个APP打包的wgt文件,实现点击携带参数跳转到wgtAPP的某一个页面
uni-app·apache
00后程序员张21 小时前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
BumBle1 天前
基于UniApp实现DeepSeek AI对话:流式数据传输与实时交互技术解析
前端·uni-app
会点法律的程序员1 天前
小程序 地理位置授权怎么搞
前端·小程序·uni-app