谷歌地图绘图示例在 jsfiddle 中运行良好，但在 html 中运行良好答案

【问题标题】：Google maps drawing example works fine in jsfiddle but not in html谷歌地图绘图示例在 jsfiddle 中运行良好，但在 html 中运行良好
【发布时间】：2015-08-18 20:20:09
【问题描述】：

这是 jsfiddle 链接：http://jsfiddle.net/J5zMg/21/

这是我尝试运行的 html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style>
    #map {
        height: 420px;
        width:600px;
    }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing&extension=.js"></script>
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

var drawingManager = new google.maps.drawing.DrawingManager({
    drawingControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT,
        drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.RECTANGLE,
        google.maps.drawing.OverlayType.POLYGON]
    }
});

google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
    var position = marker.getPosition().toUrlValue(2);
    $('#marker-position').append(position + '<br>');
});


google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {
    var position = circle.getCenter();
    var rad = circle.getRadius();
    $('#marker-position').append('Centre => '+position +'<br>Radius =>' + rad+'<br>');
});

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
    var position = polygon.getPath();
    $('#marker-position').append('Polygon => '+position.getArray());
});

google.maps.event.addListener(drawingManager, 'polylinecomplete', function (polyline) {
    var position = polyline.getPath();
    $('#marker-position').append('polyline => '+position.getArray());
});

google.maps.event.addListener(drawingManager, 'rectanglecomplete', function (rectangle) {
    var position = rectangle.getBounds();
    $('#marker-position').append('rectangle => '+position);
});

drawingManager.setMap(map);
});//]]>  
</script>

<!--<script type="text/javascript" src="./js/poly2.js"></script>-->
</head>
<body>
    <div id="map"></div>
    <div id="marker-position"></div>
</body>
</html>

侦听器事件从未在我的 html 中执行，但在 jsfiddle 中工作正常，我检查了 jsfiddle 中的外部引用，它们是正确的。

我添加了诸如矩形选项、可拖动、可编辑等选项，并且在两者中都可以正常工作。

有些东西我没有考虑，也没有看到，任何引用或触发器，我在http://jsfiddle.net/J5zMg/21/embedded/result/ 中看到了 html，看不出有什么区别。

区别在于监听事件，但不知道怎么解决。

有什么帮助吗？

提前致谢

【问题讨论】：

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

【解决方案1】：

您忘记包含jQuery 脚本标签。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js""></script>

【讨论】：