话不多说 直接上干货 提前申请谷歌地图账号
一、新建地图 使用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标记点、省市区颜色标记、输入框搜索、范围选择、信息弹窗等】
谷歌地图、marker标记、距离数据筛选、省市区颜色标记、路线选择