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

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

2 个答案: