Question

我有一个充满地图触发器的页面，当用户点击这些链接时，我想用javascript创建地图。它第一次工作，但当我关闭地图并重新打开它时，内容为空白（缩放，谷歌徽标，道路/地形下拉除外）。所以它似乎“差点”起作用。我究竟做错了什么？当我隐藏地图时，我甚至试图清空地图画布的内容，但问题仍然存在。感谢

这是我的HTML

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

这是我的Javascript

{{1}}

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"> Show Map1 </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>

Answer 2

不幸的是，我不知道为什么在我的情况下需要这样做，但每次调用时我都必须调整大小并重新定位地图，使用此代码段

2015-06-13 17:11:00.736 celty-test[62306:9217679] 20.000000 - 1
2015-06-13 17:11:00.739 celty-test[62306:9217679] Unable to simultaneously satisfy constraints:
(
    "<NSLayoutConstraint:0x608000084bf0 V:[NSStackViewSpacer:0x6080001834d0(>=8)]>",
    "<NSLayoutConstraint:0x608000084f10 V:[NSTextField:0x608000183330]-(0)-[NSStackViewSpacer:0x6080001834d0]>",
    "<NSLayoutConstraint:0x608000085460 V:[NSStackViewSpacer:0x6080001834d0]-(0)-[NSTextField:0x608000183400]>",
    "<NSAutoresizingMaskLayoutConstraint:0x608000084970 h=--& v=--& V:[NSTextField:0x608000183330]-(0)-|   (Names: '|':NSStackViewContainer:0x6000001a0700 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x608000084d30 h=--& v=--& V:[NSTextField:0x608000183400]-(0)-|   (Names: '|':NSStackViewContainer:0x6000001a0700 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x608000084d80 h=--& v=--& V:[NSTextField:0x608000183400(20)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x608000084bf0 V:[NSStackViewSpacer:0x6080001834d0(>=8)]>

Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens.  And/or, break on objc_exception_throw to catch this in the debugger.
2015-06-13 17:11:00.802 celty-test[62306:9217679] Unable to simultaneously satisfy constraints:
(
    "<NSLayoutConstraint:0x608000084f10 V:[NSTextField:0x608000183330]-(0)-[NSStackViewSpacer:0x6080001834d0]>",
    "<NSLayoutConstraint:0x608000085460 V:[NSStackViewSpacer:0x6080001834d0]-(0)-[NSTextField:0x608000183400]>",
    "<NSAutoresizingMaskLayoutConstraint:0x608000084970 h=--& v=--& V:[NSTextField:0x608000183330]-(0)-|   (Names: '|':NSStackViewContainer:0x6000001a0700 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x608000084d30 h=--& v=--& V:[NSTextField:0x608000183400]-(0)-|   (Names: '|':NSStackViewContainer:0x6000001a0700 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x608000084d80 h=--& v=--& V:[NSTextField:0x608000183400(20)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x608000085460 V:[NSStackViewSpacer:0x6080001834d0]-(0)-[NSTextField:0x608000183400]>

Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens.  And/or, break on objc_exception_throw to catch this in the debugger.
2015-06-13 17:11:00.814 celty-test[62306:9217679] 20.000000 - 0

Google地图地图只能加载一次

2 个答案: