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
  1. 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);
  1. Ändern Sie die Position des panorama im marker Klick-Listener.
google.maps.event.addListener(marker,'click', function(e) {
   pano.setPosition(marker.getPosition());
});

Proof-of-Concept-Geige

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