javascript 在谷歌地图标记上显示弹出气球
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14321271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying a popup balloon on a google maps marker
提问by Robert Martens
I have the following code which shows a customers postcode, and marks it on the map with a marker:
我有以下代码显示客户邮政编码，并用标记将其标记在地图上：
<?php if($_GET['postcode']){ ?>
//alert(<?php echo $_GET['postcode'];?>)
<?php }?>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng("<?php echo $_GET['postcode'];?>"),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
map.setTilt(45);
var addressArray = new Array("<?php echo $_GET['postcode'];?>");
var geocoder = new google.maps.Geocoder();
var markerBounds = new google.maps.LatLngBounds();
for (var i = 0; i < addressArray.length; i++) {
geocoder.geocode( { 'address': addressArray[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markerBounds.extend(results[0].geometry.location);
map.fitBounds(markerBounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
What I need when the marker is clicked on, is a popup bubble which the customers order information. What do I need to add to the above, to dispaly the popup bubble?
当标记被点击时，我需要的是一个弹出气泡，客户订购信息。我需要在上面添加什么来显示弹出气泡？
回答by flaria
Check out the InfoWindow overlay: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
查看 InfoWindow 覆盖：https: //developers.google.com/maps/documentation/javascript/overlays#InfoWindows
Pretty much does what you want, that is, it displays a balloon with some content.
几乎可以满足您的要求，也就是说，它会显示一个包含一些内容的气球。
What you would need to add to your code is the following:
您需要添加到代码中的内容如下：
At the beginning of your script as a global variable:
在脚本开头作为全局变量：
var infowindow;
At the map api initialization:
在地图 api 初始化时：
function initialize() {
infowindow = new google.maps.InfoWindow();
After the creation of the marker:
创建标记后：
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("<p>Some HTML content</p>");
infowindow.open(map,marker);
});
Hope this helps you
希望这对你有帮助
回答by Gga
You need to read up here...
你需要在这里阅读...
https://developers.google.com/maps/documentation/javascript/overlays
https://developers.google.com/maps/documentation/javascript/overlays
I believe the basic principle is
我相信基本原则是
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
