谷歌地图不会在拖动时加载新的图块

时间:2015-11-17 16:52:33

标签: javascript google-maps google-maps-api-3

拖动和释放时未加载新切片。而是仅显示空白背景。 map after drag and release[1]

放大或缩小加载新地图。 我正在加载当前版本:http://maps.google.com/maps/api/js

    <style type="text/css"> .single_map_canvas img { max-width: none; } </style>
<div class="single_map_canvas" id="single_map" style="height: 225px; width: 450px;"></div>

    <script type="text/javascript">
        function initialize() {
          var singleLatlng = new google.maps.LatLng(37.5364,-122.2455);
          var mapOptions = {
            zoom: 12,
            center: singleLatlng,
            draggable: true
          }
          var map = new google.maps.Map(document.getElementById('single_map'), mapOptions);

          var marker = new google.maps.Marker({
              position: singleLatlng,
              map: map
          });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

更新:这必须在<head>标记内。

<style type="text/css"> .single_map_canvas img { max-width: none; } </style>

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html>

<head>
<!--        <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
   
    </style>
-->
    <style type="text/css"> .single_map_canvas img { max-width: none; } </style>
</head>

<body>
    <div class="single_map_canvas" id="single_map" style="height: 225px;width:450px;"></div>
    
    <script>
    var map;

    function initMap() {
        var singleLatlng = new google.maps.LatLng(37.5364, -122.2455);
        map = new google.maps.Map(document.getElementById('single_map'), {
            center: singleLatlng,
            zoom: 8
        });

        var marker = new google.maps.Marker({
            position: singleLatlng,
            map: map
        });
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>

</html>

希望这会有所帮助

很可能你的网络很慢,我想