Google地图绘制示例在jsfiddle中运行正常,但在html中运行不正常

时间:2015-06-04 09:32:26

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

这是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中的外部引用并且它们是正确的。

我添加了诸如rectangleoptions,draggable,editable等选项,并且在两者中都可以正常工作。

有些事情我没有考虑,也没有看到它,任何引用或触发器,我在http://jsfiddle.net/J5zMg/21/embedded/result/中看到html并且看不到任何差异。

不同之处在于听众的事件,但我不知道如何解决。

任何帮助?

提前致谢

1 个答案:

答案 0 :(得分:0)

您忘记包含 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js""></script> 脚本标记。

import java.util.ArrayList;
import java.util.List;
import java.util.Vector;

import javax.swing.JFrame;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import javax.swing.table.DefaultTableModel;

public class Main {
  public static void main(String[] argv) throws Exception {
    DefaultTableModel model = new DefaultTableModel();
    JTable table = new JTable(model);
    model.addColumn("Col1");
    model.addRow(new Object[] { "r1" });
    model.addRow(new Object[] { "r2" });
    model.addRow(new Object[] { "r3" });

    Vector data = model.getDataVector();
    Vector row = (Vector) data.elementAt(1);

    int mColIndex = 0;
    List colData = new ArrayList(table.getRowCount());
    for (int i = 0; i < table.getRowCount(); i++) {
      row = (Vector) data.elementAt(i);
      colData.add(row.get(mColIndex));
    }

    // Append a new column with copied data
    model.addColumn("Col3", colData.toArray());

    JFrame f = new JFrame();
    f.setSize(300, 300);
    f.add(new JScrollPane(table));
    f.setVisible(true);
  }
}