Question

我正在尝试在我正在处理的网站上实施谷歌地图。我从google maps api网站复制了一个示例，您可以在其中覆盖圆圈。地图加载正常，但非控件的工作方式是：放大和缩小，平移地图。有谁知道可能导致这种情况的原因＆gt;以下是我的代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
    // This example creates circles on the map, representing
    // populations in North America.

    // First, create an object containing LatLng and population for each city.
    var citymap = {};
    citymap['chicago'] = {
        center: new google.maps.LatLng(41.878113, -87.629798),
        population: 2714856
    };
    citymap['newyork'] = {
        center: new google.maps.LatLng(40.714352, -74.005973),
        population: 8405837
    };
    citymap['losangeles'] = {
        center: new google.maps.LatLng(34.052234, -118.243684),
        population: 3857799
    };
    citymap['vancouver'] = {
        center: new google.maps.LatLng(49.25, -123.1),
        population: 603502
    };

    var cityCircle;

    function initialize() {
        // Create the map.
        var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(37.09024, -95.712891),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        // Construct the circle for each value in citymap.
        // Note: We scale the area of the circle based on the population.
        for (var city in citymap) {
            var populationOptions = {
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: citymap[city].center,
                radius: Math.sqrt(citymap[city].population) * 100
            };
            // Add the circle for this city to the map.
            cityCircle = new google.maps.Circle(populationOptions);
        }
    }

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

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

</html>

以下是指向错误的网站的链接：http://surftoursouthafrica.com/map

Answer 1

你的代码很好。

在您的网页上，您有更多干扰地图的内容。

从col-xs-12周围的div中移除map-canvas类，它将起作用：

<div class="content">
    <div id="map-canvas"></div>
</div>

不能放大和缩小谷歌地图

1 个答案: