Google Maps PanTo OnClick

Je suis en train de panTo d'une zone sur une carte sur cliquez sur. Le script ne fonctionne pas et recharger la page. Peut-être que quelqu'un peut voir le problème.

Ma fonction

function clickroute(lati,long) {

       map = google.maps.Map(document.getElementById("map_canvas"));
      map.panTo(lati,long)
  }

Et le reste

var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
      geocoder = new google.maps.Geocoder();
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
      zoom:10,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var address = 'virginia water';
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } 
    });
    directionsDisplay.setMap(map);
  }

  function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

Et mon événement

<a href="" onclick="clickroute(51.433373, -0.712251)">test</a>

source d'informationauteur Robin Knight

  1. 25

    Le problème est qu'à l'aide de votre map.panTo(latitude,longitude) mais l'API google maps utilise ceci: panTo(latLng myLatLng) où latLng est une carte google classe.

    essayer quelque chose comme cela (non testé)

    function clickroute(lati,long) {
      var latLng = new google.maps.LatLng(lati, long); //Makes a latlng
      map.panTo(latLng); //Make map global
  }

    Look ici pour plus d'info.

    MODIFIER
    Comme quelqu'un d'autre a déclaré que vous ne voulez pas refaire une nouvelle carte. C'est peut-être plus facile de le faire global?

  2. 3

    Le panTo accepte LatLng objet en tant que paramètres qui ne sont pas juste des coordonnées. Créer un LatLng objet avant de le transmettre à panTo méthode.

    function clickroute(lati,long) {
    map.panTo(new google.maps.LatLng(lati,long));
    return false; //this will cancel your navigation
}

    Votre page est actualisée, parce que vous n'annulez pas la navigation de l'événement onClick que vous avez mis dans la balise d'ancrage. Voir le commentaire dans le code ci-dessus.

    Et comme les autres disent de prendre la carte de la variable de cette fonction et de faire une carte mondiale.

  3. 2

    vous pouvez également définir un nouveau marqueur à la volée:

       var LatLng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
              content: "<h2>Hier wohne ich!</h2>",
              map: map,position: results[0].geometry.location 
              });
    map.panTo(LatLng);
  4. 0

    De la ligne...

    map = google.maps.Map(document.getElementById("map_canvas"));

    .. c'est réellement d'essayer de créer une nouvelle Carte dans le #map_canvas Div. Depuis que la carte existe déjà, vous n'avez pas besoin que l'instruction d'affectation. Juste appeler

    map.panTo(lati,long)

    devrait fonctionner?

    Edit: Désolé, SSRide360 est exact que devrait être...

    map.panTo(new google.maps.LatLng(lati, long));