faire le bouton avec le tableau de coordonnées qui vous relocaliser lorsque vous le poussez

Question

J'ai une carte google, et j'ai beaucoup de coordonnées de différents endroits. Et ce que je dois faire - c'est un bouton, et quand vous le poussez, il déménagera à l'utilisateur différentes coordonnées

Je suis confus comment faire

J'ai fait un tel exemple seulement avec différents boutons - http://jsfiddle.net/wb7eqbnj/

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"> 

</script> 
<div id="map_canvas" style="width: 100%; height: 400px"></div> 
<div id="menu"> 
    <input type="button" id="panLA" value="Pan To Los Angeles" /> 
    <input type="button" id="panLB" value="Pan To Long Beach" /> 

    <input type="button" id="london" value="london" /> 
    <input type="button" id="leeds" value="leeds" /> 
    <input type="button" id="cambridge" value="cambridge" /> 
    <input type="button" id="edinburg" value="edinburg" /> 
    <input type="button" id="miami" value="miami" /> 

</div> 
<div id="data"></div> 

Et JS:

var map; 

$(document).ready(function() { 
    initialize(); 

    $("#menu").on("click", "#panLA", function() { 
     var laLatLng = new google.maps.LatLng(34.01131647557699, -118.25599389648437); 
     marker.setPosition(laLatLng); 
     map.panTo(laLatLng); 
    }); 
    $("#menu").on("click", "#panLB", function() { 
     var laLatLng = new google.maps.LatLng(33.70131647557699, -118.15599389648437); 

marker.setPosition(laLatLng);  map.panTo(laLatLng); 
    }); 

    $("#menu").on("click", "#london", function() { 
     var laLatLng = new google.maps.LatLng(51.501417, -0.020886);;marker.setPosition(laLatLng); 
     map.panTo(laLatLng); 
    }); 
    $("#menu").on("click", "#leeds", function() { 
     var laLatLng = new google.maps.LatLng(53.708214, -1.621459);marker.setPosition(laLatLng); 
     map.panTo(laLatLng); 
    }); 
    $("#menu").on("click", "#cambridge", function() { 
     var laLatLng = new google.maps.LatLng(52.231462, 0.147424);marker.setPosition(laLatLng); 
     map.panTo(laLatLng); 
    }); 
    $("#menu").on("click", "#edinburg", function() { 
     var laLatLng = new google.maps.LatLng(55.94756, -3.211026);marker.setPosition(laLatLng); 
     map.panTo(laLatLng); 
    }); 
    $("#menu").on("click", "#miami", function() { 
     var laLatLng = new google.maps.LatLng(25.77248, -80.186847);marker.setPosition(laLatLng); 
     map.panTo(laLatLng); 
    }); 
}); 

function initialize() { 
    var myLatlng = new google.maps.LatLng(51.5120, -0.12); 
    var myOptions = { 
     zoom: 16, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     styles:[{ 
      "featureType": "poi", 
      "stylers": [{ 
       "visibility": "off" 
      }] 
     }, { 
      "featureType": "water", 
      "stylers": [{ 
       "color": "#d2d2d2" 
      }] 
     }, { 
      "featureType": "landscape.man_made", 
      "elementType": "labels", 
      "stylers": [{ 
       "visibility": "off" 
      }] 
     }, { 
      "featureType": "transit.line", 
      "stylers": [{ 
       "visibility": "simplified" 
      }, { 
       "color": "#b5b5b5" 
      }] 
     }, { 
      "featureType": "road.arterial", 
      "elementType": "geometry.stroke", 
      "stylers": [{ 
       "visibility": "on" 
      }, { 
       "color": "#b4b4b4" 
      }, { 
       "weight": 0.1 
      }] 
     }, { 
      "featureType": "road.arterial", 
      "elementType": "geometry.fill", 
      "stylers": [{ 
       "color": "#b4b4b4" 
      }] 
     }, { 
      "featureType": "road.local", 
      "elementType": "geometry.stroke", 
      "stylers": [{ 
       "visibility": "off" 
      }] 
     }, { 
      "featureType": "road.arterial", 
      "elementType": "labels.text.stroke", 
      "stylers": [{ 
       "color": "#808080" 
      }, { 
       "visibility": "simplified" 
      }] 
     }, { 
      "featureType": "road.highway", 
      "elementType": "geometry.fill", 
      "stylers": [{ 
       "color": "#b4b4b4" 
      }] 
     }] 

    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 

    marker = new google.maps.Marker({ 
     position: myLatlng, 
     icon: "http://unfold.no/css/images/map-marker.png", 
     map: map 
    }); 
} 

Mais je ne sais pas vraiment comment faire un bouton avec tout ce que coordina tes

Nous vous remercions de votre aide!

Answer 1

Ce que je voudrais faire est de stocker la lat lang dans les attributs html.

<input type="button" data-attr-lat="34.01131647557699" data-attr-lng="-118.25599389648437" id="panLA" value="Pan To Los Angeles" /> 

Dans votre jquery, vous devriez être en mesure d'avoir une fonction:

$('menu input[type="button"]').on('click',function(){ 
    let lat = $(this).attr('data-attr-lat'); 
    let lng = $(this).attr('data-attr-lng'); 
    let latLng = new google.maps.LatLng(lat, lng); 
    marker.setPosition(latLng); 
    map.panTo(latLng); 
}); 

Comment ça marche:

$('menu input[type="button"]') 

Le code ci-dessus sélectionne chaque bouton dans le menu

.on('click',function(){}) 

Le code ci-dessus à taches d'un clic à l'auditeur à chaque bouton retourné par $('menu input[type="button"]')

let lat = $(this).attr('data-attr-lat'); 
    let lng = $(this).attr('data-attr-lng'); 

Dans le code ci-dessus $(this) fait référence au bouton qui a déclenché l'événement (le bouton qui a été cliqué), nous récupérons alors la latitude et lang de l'aide de la jquery .attr() fonction. Ceux-ci sont ensuite utilisés pour construire notre nouvel objet google maps LatLng.

Mise à jour après avoir réalisé que vous besoin d'un seul bouton:

Html:

<div id="menu"> 
<input type="button" id="panBtn" value="Pan To Los Angeles" /> 
</div> 

Javascript:

const coordinateArray = [ 
    new google.maps.LatLng(34.01131647557699, -118.25599389648437), 
    new google.maps.LatLng(33.70131647557699, -118.15599389648437), 
    new google.maps.LatLng(51.501417, -0.020886), 
    new google.maps.LatLng(53.708214, -1.621459), 
    new google.maps.LatLng(52.231462, 0.147424), 
    new google.maps.LatLng(55.94756, -3.211026), 
    new google.maps.LatLng(25.77248, -80.186847) 
]; 
let currentPosition = 0; 
$('#menu #panBtn').on('click',function(){ 
    let latLng = coordinateArray[(currentPosition++)%coordinateArray.length]; 
    marker.setPosition(latLng); 
    map.panTo(latLng); 
});