Question

我正在尝试使用我的数据库中的信息框（使用API v3）在Google地图上的标记上显示数据。事实是Infowindows它完美地工作但我想要设计它们，这就是我改用Infobox的原因。但它们并没有像我想象的那样出现在Infowindows。

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

Answer 1

InfoBox需要maps-API，您必须先加载maps-API infobox.js

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

解决方案：添加var-keyword以使信息框变为私有：

var infobox = new InfoBox({/*options*/})

Answer 2

从google查看此示例页面。我用它作为模板，效果很好。 https://developers.google.com/maps/articles/phpsqlajax_v3

信息框不会显示在Google地图中

2 个答案: