Question

我真的很疯狂试图找出为什么我的地图在获得地图出来的点时无法自动调整大小。任何人都可以弄清楚我做错了什么？有一些方法可以强制更新地图吗？这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX&sensor=TRUE">
    </script>
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
var map;
var poly = new MVCArray();
var bounds = new google.maps.LatLngBounds();

function initialize() {
  var mapOptions = {
    zoom: 16,
     center: new google.maps.LatLng(41.878058, 12.554911),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

 var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  };
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);
};

function addLatLng(x, y) {
  var currLatlng = new google.maps.LatLng(x, y);
  var path = poly.getPath();

  path.push(currLatlng);
  map.setMarker(new google.maps.Marker({position: {lat:x,lng:y},map:map}));

  bounds.extend(currLatlng);
  map.fitBounds(bounds);

}
</script>
<script>
   io = io.connect()

// Emit ready event.
    io.emit('ready')
    io.on('talk', function(data) {
                addLatLng(data.lat, data.long);
     });
        google.maps.event.addDomListener(window,'load',initialize);
    </script>
</head>

Answer 1

您的代码有几个错误。开始google.maps.Map.setMarker不是Google Maps API V3功能。

您无法将poly初始化为new MVCArray因为MVCArray未被定义，除了您不需要这样做。

查看此代码，要使用它，您只需单击地图即可添加标记：

<!DOCTYPE html>
<html>
<head>
    <title>Map Fit Polyline</title>
    <style type="text/css">
        html, body {
            height: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_canvas {
            height: 100%;
            width: 100%;
            min-width: 500px;
            min-height: 300px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
    <div>
        <label id="display-zoom-label">
        </label>
    </div>
    <div id="map_canvas"></div>
    <script type="text/javascript">
        var map;
        var poly;
        var bounds = new google.maps.LatLngBounds();

        function initialize() {
            var mapOptions = {
                zoom: 16,
                center: new google.maps.LatLng(41.878058, 12.554911),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

            google.maps.event.addListener(map, 'click', function (elem) {
                var latLng = elem.latLng;
                addLatLng(latLng.lat(), latLng.lng());
            });

            var polyOptions = {
                strokeColor: '#000000',
                strokeOpacity: 1.0,
                strokeWeight: 3
            };
            poly = new google.maps.Polyline(polyOptions);
            poly.setMap(map);
        };

        function addLatLng(x, y) {
            var currLatlng = new google.maps.LatLng(x, y);
            var path = poly.getPath();

            path.push(currLatlng);
            var marker = new google.maps.Marker({ position: { lat: x, lng: y }, map: map });

            bounds.extend(currLatlng);
            map.fitBounds(bounds);

        }

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

map.fitBounds（）不能处理我的动态路径（折线）

1 个答案: