uniapp 引入高德api

<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>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值