0

抱歉，我知道这已经被讨论过很多次了，但无论我找到什么答案，它似乎都对我不起作用。

基本上，我无法在点击时加载信息框……而且每次我使用代码创建和加载信息框时，似乎都会阻止我的标记加载。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
<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 geocoder;
var map;
var markers = [];
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(54.899114,-1.730348);

    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

    var boxOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };
    var infobox= new InfoBox();
    var myOptions = {
        zoom: 8,
        //scrollwheel: false,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("gmap"), myOptions);
    addPostCode('POSTCODE');
    addPostCode('POSTCODE');
addPostCode('POSTCODE');

}

function addPostCode(zip) {
    geocoder.geocode( { 'address': zip}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK)
    {
        var iconBase = 'http://www.mywebsite.co.uk/images/';
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
        url:'http://www.google.com',
        map: map,
        position: results[0].geometry.location,
        name: zip,
        icon: iconBase + 'icon.png'
        //shadow: iconBase + 'schools_maps.shadow.png'
    });

    google.maps.event.addListener(marker, 'click', function() {
        //window.location.href = marker.url;
        infobox.setContent('test');
        infobox.open(map, marker);
        });
    markers.push(marker);
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
    });
}

function checkZip(zip)
{
    var distance = Number.MAX_VALUE;
    var index = 0;
    geocoder.geocode( { 'address': zip}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK)
        {
            for(ix=0; ix< markers.length; ix++)
            {
                var tmp = getDistance(results[0].geometry.location, markers[ix].position);
                if (tmp < distance)
                {
                    distance = tmp;
                    index = ix;
                }
            }
            alert('nearest zipcode is :' + markers[index].name);
        }
    });
}

function getDistance(latlng1, latlng2)
{
    var R = 6371; // Radius of the earth in km
    var dLat = (latlng2.lat()-latlng1.lat()) * Math.PI / 180;  // Javascript functions in radians
    var dLon = (latlng2.lng()-latlng1.lng()) * Math.PI / 180;
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(latlng1.lat()  * Math.PI / 180) * Math.cos(latlng2.lat()  * Math.PI / 180) *
        Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c; // Distance in km
    d = d * 0.621371192;
    return d;
}
</script>
4

1 回答 1

0

我收到错误“信息框未定义”。因为您的帖子中有错字（是否在您的真实代码中）。

然后我看到标记（显然不是您的自定义标记，因为您没有提供正确的 URL）。

如果我点击一个标记，我会收到一个错误：Error: 'infobox' is undefined.

如果我通过将“信息框”变量的声明移动到全局范围来解决这个问题，它可以正常工作，但信息框没有内容......

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
<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 geocoder;
var map;
var markers = [];
var infobox= new InfoBox();
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(54.899114,-1.730348);

    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

    var boxOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };
    var myOptions = {
        zoom: 8,
        //scrollwheel: false,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("gmap"), myOptions);
    addPostCode('POSTCODE');
    addPostCode('POSTCODE');
addPostCode('POSTCODE');

}

function addPostCode(zip) {
    geocoder.geocode( { 'address': zip}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK)
    {
        var iconBase = 'http://www.mywebsite.co.uk/images/';
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
        url:'http://www.google.com',
        map: map,
        position: results[0].geometry.location,
        name: zip /*,
        icon: iconBase + 'icon.png' */
        //shadow: iconBase + 'schools_maps.shadow.png'
    });

    google.maps.event.addListener(marker, 'click', function() {
        //window.location.href = marker.url;
        infobox.setContent('test');
        infobox.open(map, marker);
        });
    markers.push(marker);
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
    });
}

</script>

工作示例

于 2013-10-04T15:44:46.497 回答