Question

我有一个HTML页面，其中包含表示位置的按钮列表。点击任何按钮后，我希望Google地图与该位置一起显示。地图应该在新的HTML页面上打开吗？（因为地图应该占据整个页面），还是可以在同一页面上显示地图？

编辑 - 好的，我想在另一个HTML文件中打开它。我有一个外部JS文件，其中包含以下地图代码：

function initialize(lat, lng) {

    var mapOptions = {

        center: {lat: parseFloat(lat), lng: parseFloat(lng)},
        zoom: 8,
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize(-34.397, 150.644));

我的外部HTML文件如下：

<html>
  <head>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="script.js" ></script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

但它不起作用。看来，外部JS文件找不到“map-canvas”。谁能告诉我如何解决这个问题？（script.js是外部JS文件）

Answer 1

我解决了你的问题，试试这个：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map-canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
  </head>
  <body>
    <div>
         <a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.507724100000019"> Show Map1 </a>
    </div>
    <div>
        <a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.607724100000019"> Show Map2 </a>
    </div>
    <div>
        <a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.707724100000019" targe> Show Map3 </a>
    </div>
    <script>
        var render_map = function( lat, lng, title ) {

            var mapCanvas = document.getElementById('map-canvas');

            // options
            var args = {
                zoom        : 16,
                center      : new google.maps.LatLng(lat, lng),
                mapTypeId   : google.maps.MapTypeId.ROADMAP
            };

            // create map               
            var map = new google.maps.Map( mapCanvas, args);

            // create marker
            var marker = new google.maps.Marker({
              position: args.center,
              map: map,
              title: title
            });

            toggleMap();

        }

        var toggleMap = function(){
            if ($('body').hasClass('-show-map')) {
                mapHide();
            } else {
                mapShow();
            }; 
        }

        $('.map-trigger').on('click', function(event) {

            event.preventDefault(); 
            var lat = $(this).data('lat');
            var lng = $(this).data('lng');
            render_map(lat, lng);
        });
    </script>

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

单击按钮时在HTML页面中加载Google地图

1 个答案: