uniapp app引入谷歌地图

uniapp app引入谷歌地图, 多点标记

Dai_代代

4822人浏览 · 2022-01-18 17:30:49

Dai_代代 · 2022-01-18 17:30:49 发布

首先附上原参考链接，我是参考https://blog.csdn.net/jz_jingzhen/article/details/119391472做的，原文是地图上只显示一个标点，下面我自己的是地图显示多个标点（中心思想是利用for循环画多个点）

调用谷歌地图，在手机上测试的环境是需要翻墙的

1.在谷歌申请key
2.在根目录下的hybrid->html下新建一个map.html，代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
		<script
			src="https://maps.googleapis.com/maps/api/js?key=地图key&callback=initMap&libraries=&v=weekly"
			defer>
		</script>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<style type="text/css">
			#map {
				height: 100%;
				width: 100%;
			}

			html,
			body {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
	</body>
</html>
<script>
	document.addEventListener('UniAppJSBridgeReady', function() {
		uni.postMessage({
			data: {
				action: 'message'
			}
		});
		uni.getEnv(function(res) {
			console.log('当前环境：' + JSON.stringify(res));
		});
	});
</script>
<script>
	var map = null

	function initMap() {
	//页面传过来的参数arr
		var mapPointResult = JSON.parse(decodeURIComponent(GetUrlParam('arr')))
		var centerPoint = {
			lat: mapPointResult[0].lat, 
			lng: mapPointResult[0].lng, 
		};
		//新建map
		map = new google.maps.Map(document.getElementById("map"), {
			zoom: 16,
			center: centerPoint,
		});
		var places = [];

		for (var j = 0; j < mapPointResult.length; j++) {
			places.push(new google.maps.LatLng(mapPointResult[j].lat, mapPointResult[j].lng));
		}
		
		for (var i = 0; i < places.length; i++) {
			// Creating a new marker
			var marker = new google.maps.Marker({
				position: places[i],
				map: map,
				title: 'Place number ' + i,
				icon: {
					url: 'https://now.guua.com/attachs/default/location_shop.png',
					scaledSize: new google.maps.Size(30, 30),
					origin: new google.maps.Point(0, 0),
					anchor: new google.maps.Point(0, 0)
				}
			});
		}
	}

	// 处理URL参数
	function GetUrlParam(paraName) {
		var url = window.location.href;
		var arrObj = url.split("?");
		if (arrObj.length > 1) {
			var arrPara = arrObj[1].split("&");
			var arr;
			for (var i = 0; i < arrPara.length; i++) {
				arr = arrPara[i].split("=");
				if (arr != null && arr[0] == paraName) {
					return arr[1];
				}
			}
			return "";
		} else {
			return "";
		}
	}
</script>

3.使用谷歌地图，新建一个vue页面

<template>
	<view><web-view :src="src"></web-view></view>
</template>

<script>
export default {
	data() {
		return {
			src: '',
			arr: [{lng: 103.53028, lat: 10.62592},{lng: 104.82425, lat: 11.58515}]
		};
	},
	onLoad() {
	//因为我是多个标记，所以我的是一个数组
		this.src = '/hybrid/html/map.html?arr=' + encodeURIComponent(JSON.stringify(this.arr));
	},
	methods: {}
};
</script>

<style></style>