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

Question

我有以下显示客户邮政编码的代码，并用标记在 map 上标记它:

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

查看信息窗口叠加层: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

几乎可以满足您的要求，即显示一个包含一些内容的气球。

您需要在代码中添加以下内容:

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

var infowindow;

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

希望对你有帮助