谷歌地图圈没有出现

时间:2014-01-30 19:36:35

标签: google-maps-api-3 geometry

我无法在地图上显示圆圈,但我没有收到任何错误。谁能告诉我我做错了什么,拜托?

function initialize() {
        var mapOptions = {
             center: new google.maps.LatLng(41.0342375, -77.3066405),
             zoom: 8,
             mapTypeControl: false,
             mapTypeId: google.maps.MapTypeId.TERRAIN, //style below will be 'shift worker' from snazzy maps
             styles: [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}] 

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

     var map = document.getElementById("map-canvas");

     $(document).ready(function() {
        google.maps.visualRefresh = true;

        google.maps.event.addDomListener(window, 'load', initialize);

        var populationOptions = {
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          center: new google.maps.LatLng(41.0342375, -77.3066405),
          radius: 84482
        };
        // Add the circle for this city to the map.
        cityCircle = new google.maps.Circle(populationOptions);

});

1 个答案:

答案 0 :(得分:2)

Javascript中的变量范围位。

mymap变量是您需要用于CircleOptions map属性的变量。但是它的初始化功能超出了范围。匿名函数中的map变量只是一个DIV DOM元素,而不是google.maps.Map实例。

简化工作示例@ http://jsfiddle.net/stevejansen/H5bRg/

没有理由将jQuery的文档#ready事件处理程序与google.maps.event.addDomListener(window, 'load', initialize);结合起来。它们都处理相同的DOM事件。坚持一个或另一个。使用两者都很困惑。