You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.4 KiB
67 lines
2.4 KiB
<html>
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<title>保養員地圖</title>
|
|
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="map.css"/>
|
|
<link rel="stylesheet" href="style.css"/>
|
|
<link rel="stylesheet" href="jsgrid.css">
|
|
<link rel="stylesheet" href="jsgrid-theme.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map" style="height: 100%">
|
|
|
|
</div>
|
|
|
|
<!-- Jquery -->
|
|
<script src="js/lib/jquery-3.4.1.min.js"></script>
|
|
<!-- Bootstrap-->
|
|
<script src="js/lib/popper.min.js"></script>
|
|
<script src="js/lib/bootstrap.min.js"></script>
|
|
<!-- Ionicons -->
|
|
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
|
|
<script src="js/base.js"></script>
|
|
<script src="../da/chart.js/Chart.js"></script>
|
|
<script src="js/jsgrid.js"></script>
|
|
<script>
|
|
function initMap() {
|
|
var origin = new google.maps.LatLng(25.0835613, 121.5534229);//起点
|
|
var destination = new google.maps.LatLng(25.0825613, 121.5544229);//终点
|
|
var mapOptions = {
|
|
zoom: 14,
|
|
center: origin
|
|
}
|
|
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
|
|
var directionsRenderer = new google.maps.DirectionsRenderer();
|
|
directionsRenderer.setMap(map);
|
|
calcRoute(haight,oceanBeach,directionsRenderer);
|
|
}
|
|
|
|
function calcRoute (haight,oceanBeach,directionsRenderer) {
|
|
var request = {
|
|
origin: origin,
|
|
destination: destination,
|
|
travelMode: google.maps.TravelMode['WALKING'],
|
|
waypoints:waypoints
|
|
};
|
|
var directionsService = new google.maps.DirectionsService();
|
|
directionsService.route(request, function(response, status) {
|
|
console.log('返回的结果');
|
|
console.log(response);
|
|
console.log(status);
|
|
if (status == 'OK') {
|
|
directionsRenderer.setDirections(response);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCJp-JIcYIyeR_QNpREvsepApvVytZWOs&callback=initMap" async defer></script>
|
|
</body>
|
|
</html>
|
|
|