Question

我正在尝试让我的Google地图上的信息框和群集标记很好地工作但我遇到了麻烦。

我已成功获得群集标记，但我不知道如何在没有所有信息框的情况下加载页面。

编辑：我已将以下代码编辑为Geocodezip的建议，并且它正在运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?sensor=false&ext=.js">
</script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript" src="markerclusterer.js"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var secheltLoc = new google.maps.LatLng(-33.8515592,151.0386416),
         markers,
            myMapOptions = {
             zoom: 7,
            center: secheltLoc,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), myMapOptions);

    // Start InfoBox

    function initMarkers(map, markerData) {
        var newMarkers = [],
            marker;

        for(var i=0; i<markerData.length; i++) {
            var lat = markerData[i].lat;
            var lng = markerData[i].long;
            marker = new google.maps.Marker({
                map: map,
                draggable: false,
                position: new google.maps.LatLng(lat, lng),
                visible: true
            }),
            boxText = document.createElement("div"),
            //these are the options for all infoboxes
            infoboxOptions = {
                content: boxText,
                disableAutoPan: false,
                zIndex: null,
                maxWidth: 0,
                boxStyle: {
                    background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                    opacity: 0.85,
                },
                closeBoxMargin: "6px 2px 0px 0px",
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: true
            };


            newMarkers.push(marker);
            //define the text and style for all infoboxes
            boxText.style.cssText = "border: 1px solid #333; margin-top: 3px; background: #fff; padding: 1px; font-size: 11px; white-space:nowrap; padding-right: 20px; color: #333";
            boxText.innerHTML = markerData[i].BusinessName;
            //Define the infobox
            newMarkers[i].infobox = new InfoBox(infoboxOptions);
            //Open box when page is loaded
            // newMarkers[i].infobox.open(map, marker);


            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                for ( h = 0; h < newMarkers.length; h++ ) {
                newMarkers[h].infobox.close();
            }
            newMarkers[i].infobox.open(map, this);
            map.panTo(new google.maps.LatLng(lat, lng));
            }
        })(marker, i));


        }

        var markerCluster = new MarkerClusterer(map, newMarkers);

    }

            //here the call to initMarkers() is made with the necessary data for each marker.  All markers are then returned as an array into the markers variable
    markers = initMarkers(map, [

// DON'T EDIT BELOW THIS LINE.

{ lat: -33.878301, long: 150.981126, BusinessName: 'Example<br>InfoBox1' },

{ lat: -33.7452559, long: 150.6897012, BusinessName: 'Penrith Business' },

{ lat: -33.8618472, long: 151.1834829, BusinessName: 'Sydney Business' },

{ lat: -36.5796478, long: 144.7272382, BusinessName: 'Vic Business' },

{ lat: -33.2859758, long: 149.0950847, BusinessName: 'Orange Business' },

{ lat: -33.799211, long: 150.926357, BusinessName: '<a target="_blank" href="http://example.com">Example</a>', Note: 'This is an unseen note.' }


// DON'T EDIT ABOVE THIS LINE.

    ]);

}

// End InfoBox


// Geocoder below

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var BlueMarker = 'images/blue-marker.png';
      var marker = new google.maps.Marker({
          map: map,
          icon: BlueMarker,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

// End Geocoder

</script>

</head>

<body onload="initialize()">
<div class="container">
    <div class="content">
    <div id="panel">
      <input id="address" type="textbox" value="Melbourne, VIC">
      <input type="button" value="< Type location to move map (and place blue marker)" onclick="codeAddress()">
    </div>

    <div style="width:850px; height: 600px" id="map-canvas"></div>

  </div>
</div>
</body>
</html>

Answer 1

如果你不希望它默认打开，请从创建infowindow的代码中删除infowindow.open。

注释掉或删除此行：

        //Open box when page is loaded
        newMarkers[i].infobox.open(map, marker);

（将infowindow.open留在标记点击事件监听器中）

working fiddle

如何让我的信息框显示在Google地图上的非聚集标记上？

1 个答案: