javascript - 在谷歌地图标记上显示弹出气球

Question

我有以下代码显示客户邮政编码，并用标记在地图上标记它：

<?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>

单击标记时我需要的是一个弹出气泡，客户订购信息。我需要在上面添加什么来显示弹出气泡？

Answer 1

查看 InfoWindow 覆盖： https ://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

几乎可以满足您的需求，也就是说，它会显示一个带有一些内容的气球。

您需要添加到代码中的内容如下：

在脚本的开头作为全局变量：

var infowindow;

在地图 api 初始化时：

function initialize() {
  infowindow = new google.maps.InfoWindow();

创建标记后：

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);
});

希望这可以帮助你

Answer 2

你需要在这里阅读...

https://developers.google.com/maps/documentation/javascript/overlays

我相信基本原则是

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});