背景：项目中需要导航至多个目标网点，并规划路线
这里搞出来了两种方案，一种内嵌式，一种通过链接跳转
内嵌式，通过web-view
<template>
<web-view :src='src'></web-view>
</template>
<script>
export default {
data() {
return {
src: '../../static/map.html'
}
},
onLoad(options) {
// console.log(options)
this.src = this.src + '?origin=' + options.origin + '&waypoints=' + options.waypoints
// console.log(this.src)
}
}
</script>
注意：内嵌的html要放在static或者hybrid根目录下
文档
然后通过URL来传参，下面是我的HTML，具体大家根据自己的需求改动
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map_canvas {
height: 100%
}
.goBox {
position: fixed;
top: 86%;
left: 0;
width: 100%;
height: 120px;
line-height: 120px;
text-align: center;
}
.goBox div {
width: 180px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #3c9cff;
border-radius: 20px;
margin: 0 auto;
color: #fff;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key="></script>
</head>
<body onload="">
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="total"></div>
<div class="goBox">
<div id='goBtn' onclick="navTo()">Google map</div>
</div>
</body>
<script type="text/javascript">
// 起点
let origin = JSON.parse(GetUrlParam().origin)
// 航点
let waypoints = JSON.parse(GetUrlParam().waypoints)
console.log(waypoints)
let waypointsGoogle = waypoints.map(item => {
return {
location: new google.maps.LatLng(item.lat, item.lng)
}
})
let viewWaypointsGoogle = waypointsGoogle.slice(0, waypointsGoogle.length - 1)
// 导航URL
let navUrl = '';
console.log(origin)
console.log(waypointsGoogle)
function initMap() {
const map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 4,
// center: { lat: -24.345, lng: 134.46 }, // Australia.
center: origin
});
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer({
draggable: true,
map,
panel: document.getElementById("panel"),
});
// 由近及远
// new google.maps.LatLng('32.0868015','34.789812'), 广场
// new google.maps.LatLng('32.076146','34.7817226'), 咖啡店
// new google.maps.LatLng('32.0708654','34.7779298'), 咖啡店
// new google.maps.LatLng('32.0688446','34.7721636'), 医院
// new google.maps.LatLng('32.0628071','34.7628015'), 中餐馆
directionsRenderer.addListener("directions_changed", () => {
const directions = directionsRenderer.getDirections();
if (directions) {
computeTotalDistance(directions);
}
});
displayRoute(
// "Perth, WA",
// "Sydney, NSW",
// { lat: 31.9506957, lng: 34.918769 },
// { lat: 31.9624672, lng: 34.9135116 },
// new google.maps.LatLng('32.0868015', '34.789812'), //起点广场
// new google.maps.LatLng('32.0628071', '34.7628015'), //中餐馆
origin,
waypointsGoogle[waypointsGoogle.length - 1],
directionsService,
directionsRenderer,
viewWaypointsGoogle
);
}
function displayRoute(origin, destination, service, display, waypointsGoogle) {
service
.route({
origin: origin,
destination: destination,
waypoints: waypointsGoogle,
// waypoints: [{
// location: new google.maps.LatLng('32.0688446', '34.7721636')
// }, //医院
// {
// location: new google.maps.LatLng('32.076146', '34.7817226')
// }, //咖啡店
// {
// location: new google.maps.LatLng('32.0708654', '34.7779298')
// }, //咖啡店
// ],
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING,
// avoidTolls: true,
})
.then((result) => {
console.log(result)
display.setDirections(result);
// navUrl 拼接
navUrl = `http://maps.google.com/maps?saddr=${origin.lat},${origin.lng}&daddr=`
result.routes[0].waypoint_order.forEach((item, index) => {
if (result.routes[0].waypoint_order.length == index + 1) {
navUrl += waypoints[item].lat + ',' + waypoints[item].lng
} else {
navUrl += waypoints[item].lat + ',' + waypoints[item].lng + ',%20to:'
}
})
navUrl += ',%20to:' + waypoints[waypoints.length - 1].lat + ',' + waypoints[waypoints.length - 1].lng
console.log(navUrl)
})
.catch((e) => {
alert("Could not display directions due to: " + e);
});
}
function computeTotalDistance(result) {
let total = 0;
const myroute = result.routes[0];
if (!myroute) {
return;
}
for (let i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById("total").innerHTML = total + " km";
}
// window.initMap = initMap;
var googleMap = initMap();
// 处理URL参数
function GetUrlParam(paraName) {
var url = decodeURIComponent(location.search); //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
var tempArr = strs[i].split("=");
// 类型转换
if (tempArr[1] == 'true') {
tempArr[1] = true;
}
if (tempArr[1] == 'false') {
tempArr[1] = false;
}
if (/^[\d|.]+$/.test(tempArr[1])) {
tempArr[1] = Number(tempArr[1]);
}
// 写入对象
if (tempArr[0].search(/\[.*]/) == -1) {
theRequest[tempArr[0]] = tempArr[1];
} else {
// 数组
var key = tempArr[0].replace(/\[.*]/, '');
if (!theRequest[key]) {
theRequest[key] = [tempArr[1]];
} else {
theRequest[key].push(tempArr[1]);
}
}
}
}
return theRequest;
}
// var btnTo = document.getElementById("goBtn");
// btnTo.οnclick = function() {}
function navTo() {
console.log(navUrl)
window.open(navUrl)
}
</script>
</html>
外链式
let url =
`http://maps.google.com/maps?saddr=${lat},${lng}&daddr=${daddr}&travelmode=DRIVING`
// console.log(url)
window.open(url)
saddr后面是起点，daddr为多个目的地，travelmode为出行方式，可为经纬度或地址，该链接可以直接跳转GoogleMap
参考
735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
