uniapp 使用高德地图

<template>
	<view>
		<view class="map" id="map"></view>
	</view>
</template>

<script>
	import AMap from "../../static/js/map.js"

	export default {
      
      
		data() {
      
      
			return {
      
      
				title: 'hello',
				provider: '',
				map: null,
				zoom: 5,
				resAmap: null,
				scrollH: 500,
				scrollW: 500,
				initLat: 38.913423, //初始维度
				initLng: 116.368904, //初始经度
				covers: [],
				LlayAroundGroupOpen: true, //l网周边
			}
		},
		methods: {
      
      
			async initAMap() {
      
      
				try {
      
      
					this.resAmap = await AMap();
					this.$nextTick(function() {
      
      
						var map = new this.resAmap.Map('map', {
      
      
							center: [this.initLng, this.initLat],
							zoom: this.zoom
						});
						var styleName = "amap://styles/darkblue";
						map.setMapStyle(styleName);
						this.map = map;
						console.log(this.map)
						this.resAmap.plugin('AMap.Geolocation', () => {
      
      
							var geolocation = new this.resAmap.Geolocation({
      
      
								enableHighAccuracy: true, //是否使用高精度定位,默认:true
								timeout: 10000, //超过10秒后停止定位,默认:5s
								buttonPosition: 'RB', //定位按钮的停靠位置
								// buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
								zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
							});
							map.addControl(geolocation);
							geolocation.getCurrentPosition(function(status, result) {
      
      
								if (status == 'complete') {
      
      
									onComplete(result)
								} else {
      
      
									onError(result)
								}
							});
						});
						//解析定位结果
						var then = this;

						function onComplete(data) {
      
      
							console.log(data) // 获取到的定位信息
							then.initLat = data.position.lat;
							then.initLng = data.position.lng;
						}

						function onError(data) {
      
      
							console.log(data) // 定位失败的信息
						}
					})
				} catch (e) {
      
      
					console.log(e)
				}
			}
		},

		onLoad() {
      
      
			this.initAMap()
		},


	}
</script>

<style>
	.map {
      
      
		width: 100%;
		height: 100vh;
	}
</style>

map.js

export default function MapLoader() {
    
    
	return new Promise((resolve, reject) => {
    
    
		if (window.AMap) {
    
    
			resolve(window.AMap);
		} else {
    
    
			var script = document.createElement('script');
			script.type = "text/javascript";
			script.async = true;
			script.src =
				"https://webapi.amap.com/maps?v=1.4.15&key=729f7743027aa4b48949bc6e5786acbe&callback=initAMap";
			script.onerror = reject;
			document.head.appendChild(script);
		}
		window.initAMap = () => {
    
    
			resolve(window.AMap);
		};
	})
}

Guess you like

Origin blog.csdn.net/qq_25430563/article/details/119349163