0

以下是地图的简单再现，测试添加了 Google 地图 jQuery v.3：

<!DOCTYPE html>
<head>
    <title>Google Maps JQuery Plugin Test</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.7/jquery.min.js"></script>
    <script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script>
    <script type="text/javascript">
        $('#map_canvas').gmap({
            'some_option': 'some_value'
        }); // Add the contructor
        // addMarker returns a jQuery wrapped google.maps.Marker object 
        var $marker = $('#map_canvas').gmap('addMarker', {
            'position': '57.7973333,12.0502107',
            'bounds': true
        });
        $marker.click(function () {
            $('#map_canvas').gmap('openInfoWindow', {
                'content': 'Hello World!'
            }, this);
        });
    </script>
</head>
<body>
    <div id="map_canvas" style="width:250px;height:250px"></div>
</body>
</html>
4

1 回答 1

0

首先，您需要确保正确加载了以下库：

<script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script>

因为它包含.gmap()函数 - 所以如果库未正确加载，您将收到确切的错误消息（即gmap function does not exist）...

其次 - 您试图在完全加载之前访问 DOM - 标签中的<head>代码将在<div>实际加载之前执行。

所以你应该这样做：

$(function() {
    $('#map_canvas').gmap({
        'some_option': 'some_value'
    }); // Add the contructor
    // addMarker returns a jQuery wrapped google.maps.Marker object 
    var $marker = $('#map_canvas').gmap('addMarker', {
        'position': '57.7973333,12.0502107',
        'bounds': true
    });
    $marker.click(function() {
        $('#map_canvas').gmap('openInfoWindow', {
            'content': 'Hello World!'
        }, this);
    });
});

将代码包装在$(function() {块中将确保它仅在 DOM 准备好时执行 -请参阅文档ready()

这里的工作示例

于 2012-05-21T15:24:22.650 回答