-2
Ich mache eine Anwendung mit Google Maps API, die ein JSON mit den Koordinaten des Markers haben. Dann zeichne ich Polylinien zwischen den Markern. Ich habe auch eine Funktion mit einem onclick -Ereignis implementiert, die einen neuen Marker innerhalb der Polylinie erzeugt. Dieser Marker muss Informationen des vorherigen Markers in der Polylinie anzeigen (der von JSON genommene, nicht angeklickte). Aber ich weiß nicht, wie ich den vorherigen Eckpunkt (Marker) einer ausgewählten Polylinie nehmen soll.Google Maps: Vorherigen Marker auf Polylinie auswählen
Code:
(function() {
window.onload = function() {
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.HYBRID,
noClear: true,
panControl: true,
scaleControl: false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
mapTypeControl: true,
zoomControl: false,
};
var map = new google.maps.Map(document.getElementById('map'), options);
// JSON
$.getJSON("loc.js", function(json) {
console.log(json);
});
//Marker type
var markers = [];
var arr = [];
var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_red.png" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
// JSON loop
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
arr.push(latLng);
// Create markers
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: pinImage,
});
infoBox(map, marker, data);
//Polylines
var flightPath = new google.maps.Polyline({
path: json,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map:map
});
infoPoly(map, flightPath, data);
//Calculate polylines distance
google.maps.LatLng.prototype.kmTo = function(a){
var e = Math, ra = e.PI/180;
var b = this.lat() * ra, c = a.lat() * ra, d = b - c;
var g = this.lng() * ra - a.lng() * ra;
var f = 2 * e.asin(e.sqrt(e.pow(e.sin(d/2), 2) + e.cos(b) * e.cos
(c) * e.pow(e.sin(g/2), 2)));
return f * 6378.137;
}
google.maps.Polyline.prototype.inKm = function(n){
var a = this.getPath(n), len = a.getLength(), dist = 0;
for (var i=0; i < len-1; i++) {
dist += a.getAt(i).kmTo(a.getAt(i+1));
}
return dist;
}
}
function infoBox(map, marker, data) {
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function(e) {
salta(data.tm);
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
salta(data.tm);
});
})(marker, data);
}
//Create onclick marker on the polyline
function infoPoly(map, flightPath, data){
google.maps.event.addListener(flightPath, 'click', function(event) {
mk = new google.maps.Marker({
map: map,
position: event.latLng,
});
markers.push(mk);
map.setZoom(17);
map.setCenter(mk.getPosition());
});
}
function drawPath() {
var coords = [];
for (var i = 0; i < markers.length; i++) {
coords.push(markers[i].getPosition());
}
flightPath.setPath(coords);
}
// Fit these bounds to the map
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < arr.length; i++) {
bounds.extend(arr[i]);
}
map.fitBounds(bounds);
//dist polylines
distpoly = flightPath.inKm();
distpolyround = Math.round(distpoly);
};
})();
Wenn ich in dem blauen Pfeil klicken, erstelle ich eine Markierung auf dem Punkt der Polylinie. I dieser Marker nimmt die Werte des vorherigen.
Es ist ein bisschen schwer, das Konzept zu verstehen. Könntest du ein paar Screenshots bereitstellen und vielleicht mehr von deinem Code posten ?! Dinge, die ich nicht verstehe, sind - Sie erstellen Polylinie zwischen 2 Markern - einer ist an der Stelle des Klicks. Wo ist der Zweite? Und auch - was das bedeutet? - _derjenige, der von JSON_ genommen wurde. Abgesehen davon - Sie sollten nur eine globale Variable erstellen, die den letzten Überblick behält. Sie speichern nur die Referenz des letzten. –
Wenn Sie mehr Code gaben, könnte ich erklären, wie es geht –
Bearbeitet: Der Code jetzt, es ist abgeschlossen. Ich versuche mein Problem besser zu erklären. Ich habe ein JSON mit den LatLng Coodinaten. Mit diesen Koordinaten erstelle ich Marker und dazwischen Polylinien. Dann erstelle ich einen neuen Marker (onclick) an einem Punkt innerhalb der Polylinie (zwischen den 2 Markern, die die Koordinaten und andere Daten enthalten). Und das Problem: Ich brauche diesen neuen Marker (onclick marker), nehme die enthaltenen Informationen des vorherigen Markers. Dies liegt daran, dass ich nicht genügend Wegpunkte in der Karte habe. – Andrew