6

こんにちは:)ご容赦ください。私はコーダーではありませんが、やってみることで学ぼうとしています。これは私が現在取り組んでいるページです。http://www.websu.it/devnw/dev/contact.html。現在、次の JavaScript を使用して、Google Maps API を使用してマップをセットアップしています。

    function initialize() {

          var mapOptions = {
          zoom: 5,
          center: new google.maps.LatLng(48.160, -6.832),
          disableDefaultUI: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP
          };

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


 var cities = [
   ['Groningen', 53.216723950863425, 6.560211181640625, 4],
   ['San Francisco', 34.01131647557699, -118.25599389648437, 5],
   ['New York City', 40.7143528, -74.0059731, 3],
   ['Amsterdam', 52.3702157, 4.8951679, 2],
   ['Maroubra Beach', -33.950198, 151.259302, 1]
 ];

 function setMarkers(map, locations) {

   for (var i = 0; i < locations.length; i++) {
     var city = locations[i];
     var myLatLng = new google.maps.LatLng(city[1], city[2]);
     var marker = new google.maps.Marker({
         position: myLatLng,
         map: map,
         title: city[0],
         zIndex: city[3]
     });
   }
 }

 This continues below...

そして、すべての li 要素をクリックすると、マップがこれらのマーカーの 1 つにパンされるリストを作成しました。

次のコードを追加しましたが、非常にうまく機能します。ただし、上記の「都市」のコード配列と、以下の var laLatLng のコードにすべての都市の経度/緯度を追加する必要があることを意味します。以下のパン スクリプトで緯度と経度をより簡単に取得するにはどうすればよいですか?

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

      $("#contacts").on("click", "#sanfransisco", function() {
          var laLatLng = new google.maps.LatLng(34.01131647557699, -118.25599389648437);
          map.panTo(laLatLng);
          map.setZoom(5);
       });
      $("#contacts").on("click", "#groningen", function() {
          var laLatLng = new google.maps.LatLng(53.216723950863425, 6.560211181640625);
          map.panTo(laLatLng);
          map.setZoom(6);
      });
      $("#contacts").on("click", "#nyc", function() {
          var laLatLng = new google.maps.LatLng(40.7143528, -74.0059731);
          map.panTo(laLatLng);
          map.setZoom(6);
      });
      $("#contacts").on("click", "#losangeles", function() {
          var laLatLng = new google.maps.LatLng(52.3702157, 4.8951679);
          map.panTo(laLatLng);
          map.setZoom(6);
      });
  });

都市から変数を取得してクリック可能なリストの JavaScript にする方法を誰かが説明してくれることを願っています。どうもありがとう、私はあなたの応答に深く感謝します!

4

2 に答える 2

6

cities配列を次のようなオブジェクトに変換すると:

var cities = {
  'Groningen':  [ 53.216723950863425, 6.560211181640625, 4],
   'San Francisco': [ 34.01131647557699, -118.25599389648437, 5],
   'New York City': [ 40.7143528, -74.0059731, 3]

};

そして、data-一致する都市名と共通のクラス名を持つ属性を各リンクに追加します。

/* not sure what html looks like , using pseudo "tagName"*/
<tagName class="map_link" data-city="Groningen">Groningen</tagName>

クラス全体に対して 1 つのハンドラーを作成できます。

$("#contacts").on("click", ".map_link", function() {
          /* "this" within handler is the actual element clciked*/

          /* find correct array from "cities" object */
         var data=cities[ $(this).data('city') ]; /* returns array[ 53.21, 6.56, 4]*/
          var laLatLng = new google.maps.LatLng( data[0],  data[1]);
          map.panTo(laLatLng);
          map.setZoom( data[2]);
       });
于 2013-01-13T17:42:34.693 に答える
5

Google マップのリバース ジオコーディング機能を使用して都市名を検索するだけです。

<ul id="cities">
  <li>San Fransisco</li>
  <li>Groningen</li>
  <li>New York City</li>
  <li>Los Angeles</li>
</ul>

JS

$('#cities li').on('click', function() {
  $.ajax({
    url: 'http://maps.googleapis.com/maps/api/geocode/json?address='+decodeURIComponent( $(this).text() )+'&sensor=false',
    type: 'GET'
  }).done(function(data) {
    var laLatLng = new google.maps.LatLng(data.results[0].geometry.location.lat, data.results[0].geometry.location.lng);
    map.panTo(laLatLng);
    map.setZoom(5);
  });
});

フィドル

于 2013-01-13T17:49:42.040 に答える