踩坑分享-引入高德地图uniapp版本

setup版本 3.2

调试基本库 2.25.4

唠嗑

这期就是满满干货，不分享什么高端技术，就是一个关于uniapp引入高德地图的实战，因为本人在这上面踩过很多坑啊，查了很多资料才出来，但目前网上呢没有那种很全面的关于高德地图引入教程，所以这期就把我踩过的坑出一期教程，方便各位友友们不要这上面浪费很多时间，话不多说，现在就开始

效果图

申请高德密钥

官网前面的流程我就不多说了 前四步就按教程做 记得下载 amap-wx.js

传送门： lbs.amap.com/api/wx/gett…

完成到这一步就ok了

//cur: amap-wx.130.js
// module.exports.AMapWX = AMapWX;  把这一行注释掉 使用import引入

export  {
    AMapWX
};

封装Map组件

<template>
	<view class="map">
		<map id="myMap" class="myMap" :style="{width: width, height: height}" :latitude="latitude" :longitude="longitude"
			:markers="markers" :show-location="true" @poitap="poitap" :key="1002"></map>
	</view>
	
</template>

<script setup>
	import {defineEmits} from 'vue'
	const emits = defineEmits(['poitap'])
	const props = defineProps({
		latitude:{
			type:String,
			default:"",
		},
		longitude:{
			type:String,
			default:""
		},
		width:{
			type:String,
			default:'100%',
		},
		height:{
			type:String,
			default:'100%'
		},
		markers:Array
	})
        //点击地图某个点触发
	const poitap = (e)=>{
		console.log(e);
		emits('poitap',e);
	}
	console.log(props)
</script>

<style lang="scss" scoped>
	.map {
		height: 100%;
		width: 100%;
	}
	
</style>

hooks 封装定位功能

import * as amapFile from "@/utils/amap-wx.130.js";
import {geoSecretKey,BASE_IMAGE_URL} from '@/utils/constants.js'
//引入你的key geoSecretKey

const useGeoLocation = ()=>{
	let amapObject = new amapFile.AMapWX({
		key: geoSecretKey
	});
	
	const getAuthorizeInfo = ()=> {
		return new Promise((resolve, reject) => {
			uni.authorize({
				scope: 'scope.userLocation',
				success() { // 允许
					uni.getLocation({
						success: function(res) {
							console.log("经纬度", res);
							 resolve(res)
						},
					})
				},
				fail() { // 拒绝
					data.openConfirm();
					reject();
					console.log("refuse authorize")
				}
			})
		})
	};
        
    //get cur location
	const getLocation = ()=>{
		return new Promise((resolve,reject)=>{
			getAuthorizeInfo().then(r=>{
				amapObject.getRegeo({
				iconPath: `${BASE_IMAGE_URL}+icon/map/location.png`,
				success: res => {
					resolve(res);
				},
				fail: (err) => {
					reject(err);
				}})
			})
		})
	}
	
	/**
	 * get nearby address
	 * @param longitude
	 * @param latitude
	 */
	const getNearByLocation = ({longitude,latitude})=>{
		return new Promise((resolve,reject)=>{
			console.log('near')
			let location = [longitude,latitude];
			amapObject.getRegeo({
				iconPath: `${BASE_IMAGE_URL}+icon/map/location.png`,
				location: location.toString(),
				success: (res) => {
					resolve(res);
				},
				fail: (err) => {
					reject(err);
				}
			})
		})
	}
	
	
	return {
		getLocation,
		getNearByLocation
	}
	
}

export default useGeoLocation;

整合

import useGeoLocation from '@/hooks/useGeoLocation.js'
import Map from '@/pages/home/cpns/Map.vue'
const {getLocation,getNearByLocation} = useGeoLocation();

<Map class="map" :latitude="data.latitude+''" :longitude="data.longitude+''" :markers="data.markers" @poitap="poitap"></Map>

onLoad(()=>{
    data.mapCtx = uni.createMapContext('myMap', this);
    getLocationInfo();
})
//定义响应式 data onLoad时获取地理位置
const getLocationInfo =()=> {
        getLocation().then(res=>{
                console.log(res);
                // 移动到当前位置
                toLocation(res);
                data.latitude = res[0].latitude;
                data.longitude = res[0].longitude;
                data.local = res[0].name;
                data.markers = [{
                        id: 1,
                        latitude: res[0].latitude,
                        longitude: res[0].longitude,
                        iconPath: res[0].iconPath,
                        // name: 'map',
                        width: 30,
                        height: 30,
                }];
        })
};
const toLocation = (obj)=> {
                // 改变地图中心位置
                console.log('改变地图中心位置');
                data.mapCtx.moveToLocation(obj);
                // 移动标记点并添加动画效果
                data.mapCtx.translateMarker({
                        markerId: 1,
                        autoRotate: false,
                        duration: 100,
                        destination: {
                                latitude: obj.latitude,
                                longitude: obj.longitude,
                        },
                        animationEnd() {
                                console.log('animation end')
                        }
                });
        };

好啦，这期分享就到这里了，如果有什么问题的话，随时在评论区留言哦，喂喂喂，别忘了点个关注再走啊