uniapp使用高德地图定位

article/2025/11/5 21:05:22

公司用的是百度地图，过听同事说，市场上用高德地图的比较多，于是又按捺不住自己那好奇万物的心，专门出研究了一下高德地图，发现内容基本一直，不过就是在方法的名字变了而已，废话不多说我们开始研究

高德地图api官网

一、小试牛刀

1、首先我们要把申请一个高德地图的key，然后就是把高德地图局部引入

在utils文件下建立一个map用来放置我们的地图

<template><view class="map"><view id="amap" class="amap"></view></view>
</template><script>export default {data() {return {latitude: 30.218143, // 纬度longitude: 120.280798, // 经度};},};
</script>
<script module="ModuleInstance" lang="renderjs">//renderjs运行在视图层的js，只支持app-vue和h5（简单来说就是开了另外一条线程）//大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力（减少通讯损耗提升性能，例如一些手势或canvas动画的场景）export default {data() {return {map: null,layer: null,parkList: [],markerId: ''};},mounted() {if (window.AMap) {//todo 如果能访问到AMap直接初始化this.initAmap();} else {//todo 动态引入const script = document.createElement('script');script.src = "https://webapi.amap.com/maps?v=1.4.15&key=你的key";;script.onload = () => {//todo 初始化地图this.initAmap();}document.head.appendChild(script);}},methods: {initAmap() {this.map = new AMap.Map('amap', {zoom: 10, //显示的缩放级别// zooms: [2, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]center: [108.954239, 34.265472], //todo 中心点坐标mapStyle: 'amap://styles/57994c871bb604a4c79184f5f65d8782', //todo 地图样式resizeEnable: true   //是否监控地图容器尺寸变化});}},};
</script>
<style lang="scss">.map {width: 100%;height: 100%;}#amap {width: 100%;height: 100%;}
</style>

效果图：

2、获取当前经纬度并标注到地图上

<script module="ModuleInstance" lang="renderjs">//renderjs运行在视图层的js，只支持app-vue和h5（简单来说就是开了另外一条线程）//大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力（减少通讯损耗提升性能，例如一些手势或canvas动画的场景）export default {data() {return {map: null,layer: null,parkList: [],markerId: ''};},mounted() {if (window.AMap) {//todo 如果能访问到AMap直接初始化this.initAmap();} else {//todo 动态引入const script = document.createElement('script');script.src = "https://webapi.amap.com/maps?v=1.4.15&key=你的key";;script.onload = () => {//todo 初始化地图this.initAmap();}document.head.appendChild(script);}},methods: {initAmap() {this.map = new AMap.Map('amap', {zoom: 10, //显示的缩放级别// zooms: [2, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]center: [108.954239, 34.265472], //todo 中心点坐标mapStyle: 'amap://styles/57994c871bb604a4c79184f5f65d8782', //todo 地图样式resizeEnable: true});// var marker = new AMap.Marker({// 	position: new AMap.LngLat(108.954239, 34.265472),// 	// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]// });// this.map.add(marker);//todo 地图创建完成 标注点this.map.on("complete", () => {this.createLabelsLayer();});},createLabelsLayer() {if (!this.map) return;let that = this;AMap.plugin('AMap.Geolocation', function() { //AMap.Geolocation插件来实现定位var geolocation = new AMap.Geolocation({// type: 'wgs84',// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 10000,// 定位按钮的停靠位置的偏移量offset: [10, 20],//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy: true,//  定位按钮的排放位置,  RB表示右下position: 'RB'})geolocation.getCurrentPosition(function(status, result) {if (status == 'complete') {onComplete(result)} else {onError(result)}});function onComplete(data) {// data是具体的定位信息let marker = new AMap.Marker({position: new AMap.LngLat(data.position.lng, data.position.lat),// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]});that.map.setCenter(new AMap.LngLat(data.position.lng, data.position.lat));that.map.setZoom(18);that.map.add(marker);}function onError(data) {console.log("定位出错");}})}},};
</script>