【uniapp】Google Maps

news2024/11/18 1:26:50

话不多说直接上干货 提前申请谷歌地图账号
一、新建地图使用h5+获取当前定位或者使用三方uniapp插件

 	var coords = ""
    navigator.geolocation.getCurrentPosition(function(position) {
			coords = {
				lat: position.coords.latitude,
				lng: position.coords.longitude
			};
			lats = position.coords.latitude;
			lngs = position.coords.longitude
		});
map = new google.maps.Map(document.getElementById('map'), {
		zoom: zoom,
		center: coords,
		mapId: "your map id",
		animation: 'BOUNCE'
	});

二、画圆

cityCircle = new google.maps.Circle({
	strokeColor: "#FF0000", // 边框颜色
	strokeOpacity: 0.6, // 边框透明度
	strokeWeight: 0.8, // 边框宽度
	fillColor: "#FF0000", // 填充颜色
	fillOpacity: 0.15, // 填充透明度
	map,
	center: {
		lat: lats,
		lng: lngs
	},
	radius: maxValue * 500, //半径
});

三、绘制marker点

  let min = 500;
	let max = 1000;
	let randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
	for (let i = 0; i < 5; i++) {
		var locObj = {
			lat: (lats + (Math.floor(Math.random() * 21) - 15) / randomNum) * 1,
			lng: (lngs - (Math.floor(Math.random() * 21) - 15) / randomNum) * 1,
			title: randomChinese(10)
		}
		const marker = new google.maps.Marker({
			position: locObj,
			title: locObj.title + '-' + i,
			imgUrl: 'https://picsum.photos/450/450?random=' + Math.floor(Math.random() * 100),
			icon: {
				url: "https://maps.gstatic.com/mapfiles/ms2/micons/blue.png",
				scaledSize: new google.maps.Size(50, 50),
			},
			map: map
		});
		markers.push(marker)
	}

四、搜索框

// 创建 Autocomplete 实例
	const input = document.getElementById("search-box");
	const autocomplete = new google.maps.places.Autocomplete(input);
	// 设置 Autocomplete 参数
	autocomplete.setFields(["geometry", "name"]);
	// 添加事件监听器，当用户选择某个地点时，在地图上标记出所选位置
	autocomplete.addListener("place_changed", function() {
		const place = autocomplete.getPlace();
		if (!place.geometry) {
			console.log("返回的地理信息无效！");
			return;
		}
		// 将地图中心点指向用户所选位置，并设置标记
		if (searchmarker) { //去除marker标记点
			searchmarker.setMap(null)
			searchmarker = ""
		}
		map.setCenter(place.geometry.location);
		searchmarker = new google.maps.Marker({
			map: map,
			position: place.geometry.location,
			title: place.name,
		});
	});

五、绘制省市区

const polygonsData = []
	//cityObjArr 请前往dcloud获取相关数据【https://ext.dcloud.net.cn/plugin?id=11873】
	for (var k = 0; k < cityObjArr.length; k++) {
			var obj = {
				polygonCoords: cityObjArr[k],
				color: getRandomColor(),
				strokeWeight: 2,
			}
			polygonsData.push(obj)
		}
	polygonsData.forEach((polygon) => {
		var polygonObj = new google.maps.Polygon({
			paths: polygon.polygonCoords,
			strokeColor: getRandomColor(), // 边界线颜色
			strokeOpacity: 0.8, // 边界线透明度
			strokeWeight: 2, // 边界线厚度
			fillColor: getRandomColor(), // 填充颜色
			fillOpacity: 0.2, // 填充透明度
			map: map,
		});
		newPolygon.push(polygonObj)
	});

六、画路线

const directionsService = new google.maps.DirectionsService();
	var TravelMode = [{
			id: 1,
			name: "DRIVING",
			color: "#ea4335"
		},
		{
			id: 2,
			name: "WALKING",
			color: "#7825fa"
		},
		{
			id: 3,
			name: "BICYCLING",
			color: "#fa6200"
		},
		{
			id: 4,
			name: "TRANSIT",
			color: "#ff00ff"
		}
	]
	for (var i = 0; i < TravelMode.length; i++) {
		startDrawRoute(directionsService, TravelMode[i])
	}
	function startDrawRoute(directionsService, travelMode) {
	// 随机数字而已  动态数字  方便查询效果
	let min = 5000;
	let max = 10000;
	let randomNum = (Math.floor(Math.random() * (max - min + 1)) + min) / 500000;
	// 起点坐标
	const origin = {
		lat: 34.7382820208 + randomNum,
		lng: 113.64360881345 + randomNum
	};
	// 终点坐标
	const destination = {
		lat: 34.78194 + randomNum,
		lng: 113.622512 + randomNum
	};
	var directionsRenderer = new google.maps.DirectionsRenderer({
		map: map,
		suppressMarkers: true, // 关闭默认图标
		polylineOptions: {
			strokeColor: travelMode.color, //设置路线颜色
			strokeWeight: 5 //设置路线宽度
		},
		// draggable: true //允许用户拖动路线
	});
	const request = {
		origin: origin,
		destination: destination,
		travelMode: travelMode.name, //绘制路线的模式
	};
	directionsService.route(request,
		(result, status) => {
			if (status === "OK") {
				directionsRenderer.setDirections(result);
				directionsRenderer.setMap(map);
				// 获取起点和终点的信息并添加标记
				var startMarker = new google.maps.Marker({
					position: result.routes[0].legs[0].start_location,
					map: map,
					icon: {
						url: "https://maps.gstatic.com/mapfiles/ms2/micons/pink.png",
						scaledSize: new google.maps.Size(50, 50),
					},
				});
				drawRouteMarker.push(startMarker)
				var endMarker = new google.maps.Marker({
					position: result.routes[0].legs[0].end_location,
					map: map,
					icon: {
						url: "https://maps.gstatic.com/mapfiles/ms2/micons/orange.png",
						scaledSize: new google.maps.Size(50, 50),
					},
				});
				drawRouteMarker.push(endMarker)
				directionsRendererArr.push(directionsRenderer)
				//显示路线的总距离
				console.log('距离===', directionsRenderer.directions.routes[0].legs[0].distance.text)
				console.log('时间===', directionsRenderer.directions.routes[0].legs[0].duration.text)
				// for (var k = 0; k < directionsRenderer.directions.routes[0].legs[0].steps.length; k++) {
				// 	console.log(directionsRenderer.directions.routes[0].legs[0].steps[k].instructions)
				// }
			} else {
				// console.log(travelMode, "绘制失败===", result)
			}
		}
	);
}