143 lines
4.0 KiB
HTML
143 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
|
<meta charset="utf-8">
|
|
<title>Gmaps drawing demo</title>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK0ovprzLWo9wrcZFsFy2Gm3FRUjBCvHw"></script>
|
|
<style>
|
|
#map {
|
|
height: 100%;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.gmap {
|
|
position: relative;
|
|
width: 50%;
|
|
height: 50% !important;
|
|
left: 25%
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<button onclick="clearMap()">clear</button>
|
|
<div id="map" class="gmap">
|
|
</div>
|
|
|
|
<script>
|
|
var map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: 20,
|
|
tilt: 0,
|
|
center: new google.maps.LatLng(51.526164, -0.129507),
|
|
mapTypeId: google.maps.MapTypeId.SATELLITE
|
|
});
|
|
var polygons = []
|
|
var circles = []
|
|
|
|
function drawCircle(lat, lon) {
|
|
var newCircle = new google.maps.Circle({
|
|
strokeColor: "#FF0000",
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: "#FF0000",
|
|
fillOpacity: 0.35,
|
|
map: map,
|
|
center: {
|
|
lat: lat,
|
|
lng: lon
|
|
},
|
|
radius: 3
|
|
});
|
|
circles.push(newCircle)
|
|
map.fitBounds(newCircle.getBounds());
|
|
}
|
|
|
|
function drawLine(lat1, lon1, bearing) {
|
|
line_end = calcLineCoords(lat1, lon1, bearing)
|
|
var polygonCoords = [{
|
|
lat: lat1,
|
|
lng: lon1
|
|
}, {
|
|
lat: line_end.lat,
|
|
lng: line_end.lon
|
|
}];
|
|
var myPolygon = new google.maps.Polygon({
|
|
paths: polygonCoords,
|
|
strokeColor: '#FF0000',
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: '#FF0000',
|
|
fillOpacity: 0.35
|
|
});
|
|
polygons.push(myPolygon)
|
|
myPolygon.setMap(map);
|
|
}
|
|
|
|
function degrees_to_radians(degrees) {
|
|
var pi = Math.PI;
|
|
return degrees * (pi / 180);
|
|
}
|
|
|
|
function radians_to_degrees(radians) {
|
|
var pi = Math.PI;
|
|
return radians * (180 / pi);
|
|
}
|
|
|
|
function calcLineCoords(lat, lon, bearing_deg) {
|
|
var dist = 20 / 1000 //km?
|
|
|
|
R = 6378.1 // Radius of the Earth
|
|
bearing_rad = degrees_to_radians(bearing_deg)
|
|
brng = bearing_rad // Bearing is 90 degrees converted to radians.
|
|
d = dist // Distance in km
|
|
|
|
lat1 = degrees_to_radians(lat) // Current lat point converted to radians
|
|
lon1 = degrees_to_radians(lon) // Current long point converted to radians
|
|
|
|
lat2 = Math.asin(Math.sin(lat1) * Math.cos(d / R) +
|
|
Math.cos(lat1) * Math.sin(d / R) * Math.cos(brng))
|
|
|
|
lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(d / R) * Math.cos(lat1),
|
|
Math.cos(d / R) - Math.sin(lat1) * Math.sin(lat2))
|
|
|
|
lat2 = radians_to_degrees(lat2)
|
|
lon2 = radians_to_degrees(lon2)
|
|
return {
|
|
lat: lat2,
|
|
lon: lon2
|
|
}
|
|
}
|
|
|
|
function clearMap() {
|
|
circles.forEach(function(item, index) {
|
|
console.log(item, index);
|
|
item.setMap(null)
|
|
});
|
|
polygons.forEach(function(item, index) {
|
|
console.log(item, index);
|
|
item.setMap(null)
|
|
});
|
|
}
|
|
|
|
function updateVehiclePos(lat, lon, heading) {
|
|
clearMap()
|
|
drawCircle(lat, lon)
|
|
drawLine(lat, lon, heading)
|
|
}
|
|
|
|
|
|
drawCircle(51.526164, -0.129507)
|
|
drawLine(51.526164, -0.129507, 90)
|
|
</script>
|
|
|
|
<body>
|
|
|
|
</html> |