如何在由.Each循环填充的List内的单选按钮控制的Map上添加setCenter

时间:2014-03-06 08:50:50

标签: javascript jquery html google-maps google-maps-api-3

我有一个问题,因为我有这个由.each循环填充的List,并且列表中的每个项目都有单选按钮的地址,现在我的问题是当选择单选按钮时我如何关注或设置中心因为我尝试了getElementByID,但它只关注最后查询的地址。 。在此先感谢能帮助我的人:)

这是我的一套代码

function initialize() {
  var minZoomLevel = 4;
  var zooms = 7;
  geocoder = new google.maps.Geocoder();
  geocode = new google.maps.Geocoder();

  // Used to Set the Center of the Maps on the Logged User
  $.getJSON('/Dashboard/LoadAddress', function Geocoding(address) {
      $.each(address, function () {

          customerlocationID = this["ID"];
          var currValAddress = this["AddressLine1"];
          var Latitude = this["Latitude"];
          var Longitude = this["Longitude"];
          LatLang = new google.maps.LatLng(Latitude, Longitude);
          var addresse = {
              zoom: 16,
              center: LatLang,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map'), addresse);

          var link = $('<input type="radio" name="a" id="radio' + customerlocationID + '"/><label>' + currValAddress + '</label>').data('location', LatLang);
          $('#initialPlace').append($('<li id=\'List\' class=\'List\'>').append(link));
          var radio = "radio" + customerlocationID;
          google.maps.event.addDomListener(document.getElementById(radio), 'click', function () {


          });
          // Bounds for North America
          var strictBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(15.70, -160.50),
            new google.maps.LatLng(68.85, -55.90));

          // Listen for the dragend event
          google.maps.event.addListener(map, 'dragend', function () {
              if (strictBounds.contains(map.getCenter())) return;
              // We're out of bounds - Move the map back within the bounds

              var c = map.getCenter(),
            x = c.lng(),
            y = c.lat(),
            maxX = strictBounds.getNorthEast().lng(),
            maxY = strictBounds.getNorthEast().lat(),
            minX = strictBounds.getSouthWest().lng(),
            minY = strictBounds.getSouthWest().lat();

              if (x < minX) x = minX;
              if (x > maxX) x = maxX;
              if (y < minY) y = minY;
              if (y > maxY) y = maxY;

              map.setCenter(new google.maps.LatLng(y, x));
          });

          // Limit the zoom level
          google.maps.event.addListener(map, 'zoom_changed', function () {
              if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
          });
      });
  });
  if (customerlocationID != 0) {

      codeAddress(customerlocationID, Rad);
  }
}

我想控制地图的setCenter的代码在这里

var link = $('<input type="radio" name="a" id="radio' + customerlocationID + '"/><label>' + currValAddress + '</label>').data('location', LatLang);
$('#initialPlace').append($('<li id=\'List\' class=\'List\'>').append(link));
     var radio = "radio" + customerlocationID;
     google.maps.event.addDomListener(document.getElementById(radio), 'click', function () {
        //google.maps.event.trigger(map, 'resize'); // or whatever
});

1 个答案:

答案 0 :(得分:1)

我相信你应该把事件处理程序放在每个可以调用map setCenter()方法的无线电上。像这样:

function initialize() {
    ...
    ...
    var map = new google.maps.Map(...);
    ...
    ...

    $('#initialPlace input[type="radio"]').click(function() {
        map.setCenter($(this).data('location'));
    });
}