2014-01-14 139 views
0

嗨,我使用谷歌地图API,我使用库的绘图,不知道这是否正常,但是当我使用圆形绘图在此刻开始绘制这不会出现在地图上,只有当圆圈完成时才会出现,但其他控制器(如多边形或矩形)出现在开始绘制的瞬间,我没有复制谷歌地图API在其页面中具有的示例,并且发生了相同..谷歌地图Api绘制圆圈

一些解决方案..感谢您的帮助。

这是从谷歌地图API

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Drawing tools</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script> 
    <script> 
function initialize() { 
    var mapOptions = { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8 
    }; 

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

    var drawingManager = new google.maps.drawing.DrawingManager({ 
    drawingMode: google.maps.drawing.OverlayType.MARKER, 
    drawingControl: true, 
    drawingControlOptions: { 
     position: google.maps.ControlPosition.TOP_CENTER, 
     drawingModes: [ 
     google.maps.drawing.OverlayType.MARKER, 
     google.maps.drawing.OverlayType.CIRCLE, 
     google.maps.drawing.OverlayType.POLYGON, 
     google.maps.drawing.OverlayType.POLYLINE, 
     google.maps.drawing.OverlayType.RECTANGLE 
     ] 
    }, 
    markerOptions: { 
     icon: 'images/beachflag.png' 
    }, 
    circleOptions: { 
     fillColor: '#ffff00', 
     fillOpacity: 1, 
     strokeWeight: 5, 
     clickable: false, 
     editable: true, 
     zIndex: 1 
    } 
    }); 
    drawingManager.setMap(map); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html> 
+0

这必须是一个错误,你应该报告它。 –

+0

使用Chrome我没有看到任何问题。 FF有点不同:第一个中心和4个点(N,S,E,W),而不是完整的圆圈。 –

回答

1

代码地图加载后试试这个代码。它为我工作。

var rad=9; 
var draw_circle=null; 
draw_circle = new google.maps.Circle({ 
            center: new google.maps.LatLng(32.0833, 34.8000), 
            radius: rad, 
            strokeColor: "#FFFFFF", 
            strokeOpacity: 0.8, 
            strokeWeight: 2, 
            fillColor: "#FFFFFF", 
            fillOpacity: 0.35, 
            map: map 
            }); 

希望它有帮助。