0

我正在尝试使用我的数据库中的信息框（使用 API v3）在谷歌地图上的标记上显示数据。事实上，Infowindows 可以完美运行，但我想为它们设置样式，这就是我切换到 Infobox 的原因。但它们并没有像我预期的那样出现 Infowindows。

视图地图.php

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
  var infowindow;
  var map;
  var infobox;
  function initialize() {
    var myLatlng = new google.maps.LatLng(6.796396,79.877823);
    var myOptions = {
      zoom: 13,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    var transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(map);
    downloadUrl("generateXml.php", function(data) {
      data = xmlParse(data);
      var markers = data.documentElement.getElementsByTagName("marker");
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
        bounds.extend(latlng);
        var marker = createMarker(markers[i].getAttribute("nom"),markers[i].getAttribute("descripcio"), latlng);
      }
      map.fitBounds(bounds);
    });
  }
  function createMarker(nom,descripcio,latlng) {
    var marker = new google.maps.Marker({
      title:nom,
      position: latlng,
      map: map
    });
    infobox = new InfoBox({
      content: descripcio,
      disableAutoPan: false,
      maxWidth: 150,
      pixelOffset: new google.maps.Size(-140, 0),
      zIndex: null,
      boxStyle: {
        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
        opacity: 0.75,
        width: "280px"
      },
      closeBoxMargin: "12px 4px 2px 2px",
      closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
      infoBoxClearance: new google.maps.Size(1, 1)
    });
    google.maps.event.addListener(marker, 'click', function() {
      infobox.open(map, marker);
      map.panTo(latlng);
    });
    return marker;
  }
  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };
    request.open('GET', url, true);
    request.send(null);
  }
  function doNothing() {}
</script>
4

2 回答 2

0

请参阅谷歌的这个示例页面。我用这个作为模板，效果很好。https://developers.google.com/maps/articles/phpsqlajax_v3

于 2013-07-26T21:52:36.150 回答
0

InfoBox 需要 maps-API，您必须在infobox.js之前加载 maps-API

另外：您为每个标记使用相同的信息框（存储在全局信息框变量中，此变量将在每次调用 createMarker 时被覆盖，因此最后一个标记将定义用于每个标记的信息框）。
最后创建的标记的描述属性为空，这就是信息框没有任何内容的原因。

解决方案：添加 var-keyword 将信息框设为私有：

var infobox = new InfoBox({/*options*/})
于 2013-07-26T20:59:15.893 回答