uniapp 使用高德地图

分手后的思念是犯贱 2022-09-02 12:50 436阅读 0赞

<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);
    		};
    	})
    }