谷歌地图 API 消息框

Question

我想知道为什么我的代码不起作用。我试图让谷歌地图 API 在点击时显示一个消息框。为了保密起见，我更改了纬度和经度以及消息框文本。任何帮助将不胜感激！谢谢！

                <script>
                var mapCanvas = document.getElementById("map");
                var mapOptions = {
                center: new google.maps.LatLng(54.2, -3.0), zoom: 6
                };
                var map = new google.maps.Map(mapCanvas, mapOptions);

                var center;
                function calculateCenter() {
                    center = map.getCenter();
                }
                    google.maps.event.addDomListener(map, 'idle', function() {
                    calculateCenter();
                });
                    google.maps.event.addDomListener(window, 'resize', function() {
                    map.setCenter(center);
                });


                var myLatlng = new google.maps.LatLng(1234567,-1233254);
                var mapOptions = {
                zoom: 4,
                center: myLatlng
                };
                //                    var map = new                                google.maps.Map(document.getElementById("map"), mapOptions);
                //
                var marker = new google.maps.Marker({
                position: myLatlng,
                title:"Hello World!"
                });

                // To add the marker to the map, call setMap();
                marker.setMap(map);


                //on click do the following
                marker.addListener('click', function() {

                //center the map to the marker
                map.setCenter(marker.getPosition());


                //make marker bounce on map
                marker.setAnimation(google.maps.Animation.BOUNCE);
                //setTimeout(function(){ marker.setAnimation(null); }, 750);



                var contentString = '<div id="content">'+
                        '<div id="Site">'+
                        '</div>'+
                        '<h1 id="firstHeading" class="firstHeading">11111</h1>'+
                        '<div id="BodyContent">'+
                        '<p>aaaaaaaaaa</p>'+
                        '</div>';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                  });                    

                });   

                </script>

Answer 1

您没有“打开”信息窗口。您需要在点击监听器中添加：infowindow.open(map, marker);。

var mapCanvas = document.getElementById("map");
var mapOptions = {
  center: new google.maps.LatLng(54.2, -3.0),
  zoom: 6
};
var map = new google.maps.Map(mapCanvas, mapOptions);

var center;

function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});


var myLatlng = new google.maps.LatLng(54.2, -3.0);
var mapOptions = {
  zoom: 4,
  center: myLatlng
};
//                    var map = new                                google.maps.Map(document.getElementById("map"), mapOptions);
//
var marker = new google.maps.Marker({
  position: myLatlng,
  title: "Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);


//on click do the following
marker.addListener('click', function() {

  //center the map to the marker
  map.setCenter(marker.getPosition());


  //make marker bounce on map
  marker.setAnimation(google.maps.Animation.BOUNCE);
  //setTimeout(function(){ marker.setAnimation(null); }, 750);



  var contentString = '<div id="content">' +
    '<div id="Site">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">11111</h1>' +
    '<div id="BodyContent">' +
    '<p>aaaaaaaaaa</p>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString,
  });
  infowindow.open(map, marker);

});

html,
body,
#map {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>