Ich versuche eine Seite zu erstellen, die ich in Excel mit VBA integrieren werde. . Ich möchte Ereignis-Listener zum Marker hinzufügen, wenn darauf geklickt wird. Ich kann es kaum schaffen, einen "Klick-Listener" für einen einzelnen Marker zu erstellen, aber ich konnte es nicht für mehrere Marker tun, die dynamisch mithilfe einer Schleife erstellt werden.
Wenn auf die Markierung geklickt wird, soll die Straßenansicht an der Position der neuen angeklickten Markierung aktualisiert werden.
Ich freue mich über jeden Vorschlag. Danke dir.
Das habe ich (von hier und da).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; //me
var labelIndex = 0; //me
var map;
var panorama;
//this will be created from server side
var markers = [
{ lat: 39.976784, lng: -75.234347, name: "marker 1" },
{ lat: 39.977043, lng: -75.235087, name: "marker 2" },
{ lat: 39.976097, lng: -75.234508, name: "marker 3" },
{ lat: 39.977059, lng: -75.233682, name: "marker 4" }
];
var myLatlng = new google.maps.LatLng(markers[0].lat,markers[0].lng);
function initialize() {
//var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
var mapOptions = {
zoom: 16,
center: myLatlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
navigationControl: true,
position: myLatlng,
//pov: {
//heading: 34,
//pitch: 10
//}
};
// Set the initial Street View camera to the center of the map
new google.maps.StreetViewPanorama(document.getElementById('pano'),
panoramaOptions);
//this is the loop that will creat the marker
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
// Create the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
label: labels[labelIndex++ % labels.length],
title: data.name
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-excel" style="width: 60%; height: 100%;float:left"></div>
<div id="pano" style="width: 40%; height: 50%;float:right"></div>
<div id="map-canvas" style="width: 40%; height: 50%;float:right"></div>
</body>
</html>
-1
user3121922
8 Aug. 2015 im 06:51
3 Antworten
Beste Antwort
- Behalten Sie einen Verweis auf das Panorama:
// Set the initial Street View camera to the center of the map
new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
Sollte sein:
// Set the initial Street View camera to the center of the map
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
- Ändern Sie die Position des
panoramaimmarkerKlick-Listener.
google.maps.event.addListener(marker,'click', function(e) {
pano.setPosition(marker.getPosition());
});
Code-Snippet:
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; //me
var labelIndex = 0; //me
var map;
var panorama;
//this will be created from server side
var markers = [{
lat: 39.976784,
lng: -75.234347,
name: "marker 1"
}, {
lat: 39.977043,
lng: -75.235087,
name: "marker 2"
}, {
lat: 39.976097,
lng: -75.234508,
name: "marker 3"
}, {
lat: 39.977059,
lng: -75.233682,
name: "marker 4"
}];
var myLatlng = new google.maps.LatLng(markers[0].lat, markers[0].lng);
function initialize() {
//var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
var mapOptions = {
zoom: 16,
center: myLatlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
navigationControl: true,
position: myLatlng,
//pov: {
//heading: 34,
//pitch: 10
//}
};
// Set the initial Street View camera to the center of the map
pano = new google.maps.StreetViewPanorama(document.getElementById('pano'),
panoramaOptions);
//this is the loop that will creat the marker
for (var index in markers) addMarker(markers[index]);
function addMarker(data) {
// Create the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
label: labels[labelIndex++ % labels.length],
title: data.name
});
google.maps.event.addListener(marker, 'click', function(e) {
pano.setPosition(marker.getPosition());
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-excel" style="width: 60%; height: 100%;float:left"></div>
<div id="pano" style="width: 40%; height: 50%;float:right"></div>
<div id="map-canvas" style="width: 40%; height: 50%;float:right"></div>
3
geocodezip
9 Aug. 2015 im 09:52
In Ihrer Funktion hier (Funktion (Daten) {....}) (Daten); Weil Sie ein Array von Markern verwenden.
function addMarker(data) {
(function(data){ <<-- New line added
// Create the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
label: labels[labelIndex++ % labels.length],
title: data.name
});
google.maps.event.addListener(marker, 'click', function(){// <<---- New line added
// Code event listener ....
});// <<---- New line added
})(data); // <<---- New line added
}
Weitere Beispiele finden Sie hier: https://developers.google.com/maps/ Dokumentation / Javascript / Beispiele / Infowindow-einfach
0
HoangHieu
8 Aug. 2015 im 04:20
// Fügen Sie diesen Code in Ihre Schleife ein
var infowindow = new google.maps.InfoWindow({
content: 'info content'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
-1
LocCocOnline.com
8 Aug. 2015 im 04:34