Question

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

感谢您的帮助。

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

代码段（带标记）：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

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

3 个答案: