Ich muss einige Teile der Straßen auf einer Google-Karte auswählen/löschen/aktualisieren können (wie auf dem Bild unten).Kann ich Teile einer Straße mit dem Google Maps API auswählen?
Diese ausgewählten Teile müssen auf dem Server gespeichert werden und es muss ein Zähler der gewählten Entfernung vorhanden sein.
Gibt es eine mögliche Lösung dieses Problems mit der Google Maps API?
Unter der Annahme, dass Sie Google Maps JavaScript-API verwenden.
Der Code für die Codierung:
<!DOCTYPE html>
<html>
<head>
<title>Encoding methods</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 50%;
float: left;
}
#right-panel {
width: 46%;
float: left;
}
#encoded-polyline {
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="right-panel">
<div>Encoding:</div>
<textarea id="encoded-polyline"></textarea>
</div>
<script>
\t \t var poly, map;
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: 34.366, lng: -89.519}
});
// Add a listener for the click event
google.maps.event.addListener(map, 'click', function(event) {
addLatLngToPoly(event.latLng, poly);
});
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* Updates the encoding text area with the path's encoded values.
*/
function addLatLngToPoly(latLng) {
\t \t \t if(!poly){
\t \t \t \t poly = new google.maps.Polyline({
\t \t \t \t \t strokeColor: '#000000',
\t \t \t \t \t strokeOpacity: 1,
\t \t \t \t \t strokeWeight: 3,
\t \t \t \t \t map: map
\t \t \t \t \t });
\t \t \t }
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
\t \t \t if(path.length==2){
\t \t \t \t poly = new google.maps.Polyline({
\t \t \t \t \t strokeColor: '#000000',
\t \t \t \t \t strokeOpacity: 1,
\t \t \t \t \t strokeWeight: 3,
\t \t \t \t \t map: map
\t \t \t \t \t });
\t \t \t }
\t \t \t path = poly.getPath();
\t \t \t path.push(latLng);
// Update the text field to display the polyline encodings
var encodeString = google.maps.geometry.encoding.encodePath(path);
if (encodeString) {
document.getElementById('encoded-polyline').value = encodeString;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap"
async defer></script>
</body>Sie können die codierte Zeichenfolge in der Datenbank speichern.
Ebenso können Sie eine gespeicherte Linienzug entschlüsseln:
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<style type="text/css">
#map {width:670px;height:600px;}
</style>
<script type='text/javascript'>
function initialize() {
var myLatlng = new google.maps.LatLng(51.65905179951626, 7.3835928124999555);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var decodedPath = google.maps.geometry.encoding.decodePath('}[email protected]\\[email protected]@r{[email protected]@[email protected]@[email protected]}[email protected]_h|@r{Zad\\y|_D}[email protected]@[email protected]}llBpoZqa{@[email protected]~eBaaX}{[email protected]}[email protected]`dYs_NquNgbjAf{[email protected]|[email protected]@}[email protected]}[email protected]|[email protected]@r{ZhjFr}[email protected]}@[email protected]@');
var decodedLevels = decodeLevels("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB");
var setRegion = new google.maps.Polyline({
path: decodedPath,
levels: decodedLevels,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
}
function decodeLevels(encodedLevelsString) {
var decodedLevels = [];
for (var i = 0; i < encodedLevelsString.length; ++i) {
var level = encodedLevelsString.charCodeAt(i) - 63;
decodedLevels.push(level);
}
return decodedLevels;
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
</body>
</html>Vergessen Sie nicht, wenn es hilft upvote!
Es ist möglich, viele nicht verbundene Polylinien statt einer Polylinie zu erstellen? –
Das Code-Snippet wurde aktualisiert. Jetzt können Sie viele verbundene Polylinien mit zwischen 2 Punkten hinzufügen. Textfeld zeigt die Zeichenfolge für die letzte Polylinie an. Ich hoffe es hilft! – arnabkaycee