jquery - 当我点击谷歌地图标记时，我可以使用 ajax 更新 Div 吗？

Question

我有一个我创建的谷歌地图及其来自数据库的建筑标记。我正在用来自数据库的信息填充这些标记。我想做的是在地图右侧的 div 上填写该信息。我的想法是，如果我可以通过 ajax 将标记的 ID 发送到将查找信息并使用信息重新加载该页面的页面。我充其量只是一个 ajax 新手，我不知道从哪里开始。

谢谢你的帮助。

Answer 1

使用 jQuery 并不难，我建议使用load方法。它启动一个 ajax 请求并将响应加载到目标中：

google.maps.event.addListener(marker, 'click', function() {
          $('#divID').load('some.php?id=123');
        });

（其中 divID 是您希望显示响应的元素的 ID）

Answer 2

当您创建标记时，您将 html 插入到 infoWindow 中查看行var html

function createMarker(latlng, name, id) {
var html = "<b> Marker " + id + "</b> <br/><br/><button onclick='doIt("+id+")'>Do It</button>";var image = "icons/XX.png";
  var shadow = "icons/XXX.png";
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    icon: image,
    shadow: shadow
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });

}

将function doIt(id) 做Ajax 重新加载。

Answer 3

这是一个通过单击多边形而不是标记来工作的示例（但概念是相同的）：

http://www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries_simple.html

代码片段（带标记）：

var map = null;

function createMarker(latLng, html) {
  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });
  google.maps.event.addListener(marker, 'click', function() {
    document.getElementById('info').innerHTML = html;
  });
}

function openIW(layerEvt) {
  if (layerEvt.row) {
    var content = layerEvt.row['admin'].value;
  } else if (layerEvt.featureData) {
    var content = layerEvt.featureData.name;
  }
  document.getElementById('info').innerHTML = "you clicked on:<br>" + content;
}

function initialize() {
  var chicago = new google.maps.LatLng(36.4278, -15.9);
  var myOptions = {
    zoom: 0,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  createMarker({
    lat: 42,
    lng: -72
  }, "United States");
  createMarker({
    lat: 42,
    lng: 72
  }, "Russia");
  createMarker({
    lat: 37.9838096,
    lng: 23.7275388
  }, "Athens, Greece");
  createMarker({
    lat: -8.783195,
    lng: -55.491477
  }, "South America");

}
google.maps.event.addDomListener(window, 'load', initialize);

<script src="http://maps.googleapis.com/maps/api/js"></script>
<table>
  <tr>
    <td>
      <div id="map_canvas" style="height:200px; width:300px;"></div>
    </td>
    <td>
      <div id="info"></div>
    </td>
  </tr>
</table>