Question

        <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map-canvas { height: 100% }
        </style>
        <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=API-KEY&sensor=false">
        </script>
        <script type="text/javascript">

        /* Northborough coordinates  */
        function initialize() {
            var mayOptions = {
                center: new google.maps.LatLng(40.714353, -74.005973),
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

            // First Marker
            var marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(40.713400, -74.007908),
            map: map
            });

            // Marker1 info window
            var infowindow1 = new google.maps.InfoWindow({
            content: 'Drew Pickles'
            });

            // Click event to Marker1
            google.maps.event.addListener(marker1, 'click', function() {
            infowindow1.open(map, marker1);
            }); 

            // Second Marker
            var marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(40.712050, -74.004647),
            map: map });

            // Marker2 info window
            var infowindow2 = new google.maps.InfoWindow({
            content: 'Teemo' 
                });

            // Click event to Marker2
            google.maps.event.addListener(marker2, 'click', function() {
            infowindow2.open(map, marker2);
            });

            }
            google.maps.event.addDomListener(window, 'load', initialize);

         </script>
         </head>
         <body>
              <div id="map-canvas"> </div> 
         </body>
         </html>

上面的代码应该显示2个标记及其相关的信息窗口。当我跑它没有任何表现。地图根本没有渲染。我在这里发布时删除了我的API密钥，原因很明显。

显示一个标记，但不显示另一个标记。这是为什么？

Answer 1

您的initialize()功能中存在拼写错误。

应该是

var mapOptions = {

不

var mayOptions = {

在跟踪Javascript中的错误时，使用浏览器的console。它应该给你类似的东西：

▶ Uncaught ReferenceError: mapOptions is not defined       (some-file-name):123

单击文件名/行号以获取错误的原点。

谷歌地图API-为什么我的代码只显示1个标记而不是2？

1 个答案: