【uniapp】Google Maps

话不多说 直接上干货 提前申请谷歌地图账号
一、新建地图 使用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)}});
}

这个时候相信你已经看到了地图【详细代码请前往dcloud插件市场查看marker标记点、省市区颜色标记、输入框搜索、范围选择、信息弹窗等】

祝：学习愉快、工作顺利

温馨提示：源码获取方式 关注【码农园区】 回复   “ google”