Question

我想使用JavaScript在Google地图中显示位置，但是当我缩小时，它会显示多个地图！此外，地图未在浏览器窗口中修复。

如何将其固定在窗口并强制它只显示一张地图？

     <!DOCTYPE html>
      <html>
      <head>
          <title>My Location:</title>
          <meta charset='utf-8'>
            <meta name='viewport' content='width=device-width, initial-scale=1.0'>
            <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&amp;language=en'></script>
            <script type='text/javascript'>

                var map;

                function loadMap(lat,lng) {
                    var myOptions = {
                        zoom: 16,
                        center: new google.maps.LatLng(lat,lng),
                        mapTypeId: google.maps.MapTypeId.ROAD ,
                        //scrollwheel: false,
                        //disableDoubleClickZoom: true,
                        minZoom: 1
                    };
                    map = new google.maps.Map(document.getElementById('my_location'), myOptions);
                    map.streetViewControl=true;
                    //window.onresize = google.maps.event.trigger(map, 'resize');

                }
                window.addEventListener('resize', function(){
                        google.maps.event.trigger(map,'resize');
                    });
            </script>
        </head>
        <body onload='loadMap(46.518465, 6.5,45,7)'>
                <div class='fd'>
                    <div class='cd'>
                        <div id='my_location' class='shadow' style='width:600px;height:260px;'></div>   
                    </div>
                </div>
        </body>
    </html>

编辑：

我上传了我的网页截屏here：一：是我的页面加载的时候。二：当我缩小并调整窗口大小时。三：当我移动地图滚动它时。

如你所见，我有两张地图！并且在三张地图中没有修复它的div！

EDIT2：我上传了我的代码！

Answer 1

你的问题不是很清楚。能否请您进一步解释这个问题？

在div更改时调整地图大小

来自API参考：

当div更改时，开发人员应在地图上触发此事件尺寸：google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）。

您需要做的就是在窗口调整大小时触发此事件，例如 window.onresize

添加监听器

window.addEventListener('resize', function(){
   google.maps.event.trigger(map,'resize');
});

显示地图div
将其放入文档的<head>。

<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 0; padding: 0 }
 #my_location{ height: 100% }
</style>

Answer 2

据我所知，您担心在最高缩放级别会显示三份地图副本？这是Google地图和基本上所有网络地图的标准配置。如果您不想这样做，可以调查使用Kartograph制作自定义地图。

如果您尝试停止缩放，请更改为以下代码：

var myOptions = {
    zoom: 16,
    center: new google.maps.LatLng(lat,lng),
    mapTypeId: google.maps.MapTypeId.ROAD ,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    minZoom: 1
};

除此之外，我不确定你在问什么。

如何修复谷歌地图并强制它只显示一张地图？

2 个答案: