<template> <view class="mapMainStyle" id="mapMain" :mapData="mapData" :change:mapData="mapMain.mapDataChange"> </template> <script> mounted() { if (typeof window.AMap === 'function') { this.initAmap() } else { const script = document.createElement('script'); script.async = "async"; script.src = 'https://webapi.amap.com/mapsv=2.0&key=你的key&plugin=AMap.Scale'; script.onload = this.initAmap.bind(this); document.head.appendChild(script); }; }, methods: { initAmap() { let that = this; that.map = new AMap.Map("mapMain", { viewMode: '2D', //开启3D视图,默认为关闭 showLabel: true, //显示地图文字标记 resizeEnable: true, //是否监控地图容器尺寸变化 mapStyle: "amap://styles/normal", zoom: 15, features: ['road'], //['bg', 'road', 'building', 'point'] }); var scale = new AMap.Scale({ visible: true, position: { top: '10rpx', right: '10rpx' } }); that.map.addControl(scale); //that.map.on('click', that.mapClick); }, mapDataChange(newValue, oldValue, ownerVm, vm) { this.initPosition(newValue); }, // mapClick(obj) { // console.log(obj); // //this.$ownerInstance.callMethod('mapClick', {qq:123}); // }, initPosition(obj) { console.log(obj); if (obj.positionData != null) { let that = this; if (obj.nearData != null) { var labelOffset = new AMap.Pixel(0, -5); obj.nearData.forEach(function(data) { var marker = new AMap.Marker({ position: new AMap.LngLat(data.lng, data .lat), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] title: data.title + "距您" + data.xydistance + "米", icon: obj.iconPath, label: { direction: 'top', content: `<div style="color:#18bc37;font-weight:400">${data.title}</div>`, offset: labelOffset, } }); marker.setExtData(data); marker.on('click', that.markerClick) that.map.add(marker); }); var position = [obj.positionData.longitude, obj.positionData.latitude]; // 标准写法 that.map.setCenter(position); var marker = new AMap.Marker({ position: new AMap.LngLat(obj.positionData.longitude, obj.positionData .latitude), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] }); this.map.add(marker); } } }, markerClick(obj) { this.$ownerInstance.callMethod('markClick', obj.target.getExtData()); }, transferData(event, ownerInstance) { ownerInstance.callMethod('reviceData', this.xyInfo); }, } </script>
uniapp 引入高德api
最新推荐文章于 2024-05-11 17:33:45 发布