Question

以下是地图的简单再现，测试了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>

Answer 1

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

<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准备就绪时执行 - see the docs for ready()

Working example here

jQuery控制台说gmap函数不存在？这是jQuery脚本文件的添加吗？

1 个答案: