对不起,我知道这个问题已经被覆盖了很多次,但是无论我给出什么答案,它似乎都对我不起作用。
基本上,我无法在单击时加载信息框...。每次我使用代码创建和加载信息框时,似乎都无法加载标记。
<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>
我收到错误“ InfoBox未定义”。因为您的帖子中有错字(在您的真实代码中)。
然后,我看到标记(显然不是您的自定义标记,因为您没有提供正确的URL)。
如果单击标记,则会出现错误:Error: 'infobox' is undefined
。
如果我通过将“ infobox”变量的声明移至全局作用域来解决此问题,则它可以正常工作,但没有任何信息内容...
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句