Question

我正在使用jquery-ui-map 3.0 RC来简化使用json使用javascript api v3在谷歌地图上放置标记的过程。

当我使用html文件进行原型设计时，它运行正常。一旦我开始在MVC4项目中使用嵌入代码并使用iis express进行调试，我就会在Google Chrome开发者工具中收到错误“Uncaught TypeError：Object [object Object]没有方法'gmap'。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MYBROWSERAPIKEYISHERE&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="../../Scripts/jquery.ui.map.js"></script>
<script type="text/javascript" src="../../Scripts/gmap3.js"></script>
<script type="text/javascript">


$(document).ready(function () {
    initialize();
});

function getMarkers() {
    // This URL won't work on your localhost, so you need to change it
    // see http://en.wikipedia.org/wiki/Same_origin_policy
    $.getJSON('../../Data/Australia-WA-Perth.json', function (data) {
        $.each(data.markers, function (i, marker) {
            $('#map_canvas').gmap('addMarker', {
                'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                'bounds': true
            }).click(function () {
                $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
            });
        });
    });
}

function initialize() {
    var pointCenter = new google.maps.LatLng(-31.95236980, 115.8571791);

    var myMapOptions = {
        zoom: 17,
        center: pointCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP  //TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

    google.maps.event.addListenerOnce(map, 'idle', function () {
        getMarkers();
    });

}
</script>

Answer 1

您要包含gmap3，但要拨打.gmap(...)。 gmap3文档中的示例使用.gmap3(...)。

此外，我找不到任何证据表明您可以使用标准google.maps API初始化地图，然后使用gmap3添加标记等。

据我所知，没有混合这两种API的机制，至少不是你尝试的方式。

如果是这样混合两个API的机制，那么似乎有必要以某种方式通知gmap3 map返回的变量new google.maps.Map(...);。否则，我猜，gmap3无法处理已经建立的地图。

因此，请尝试重新编写代码以使用100％一个API或100％使用另一个API。

Answer 2

问题可能是谷歌地图还没有准备好。您已经使用了jQuery ready函数，但我建议您使用两者的组合。

请发布小提琴或示例，以便我们进一步调查

Answer 3

我遇到了同样的问题，发现它是由多个jquery引用引起的。

我的_layout.cshtml通过body部分中的以下行加载jquery： @ Scripts.Render（ “〜/捆绑/ jquery的”） @RenderSection（“scripts”，必需：false）

这似乎有效地覆盖了我在视图中的引用。因为最好只在一个地方加载引用，我从视图中删除它然后我得到一个jQuery没有定义的错误。我不得不将@ Scripts.Render从body部分（由nuget放置在那里）移动到该部分，一切正常。

因此，如果您收到相同的错误，请查看该页面并执行“查看源”。查看是否有多个jquery脚本引用。

这个帖子给了我线索： "gmap is not a function" when using Google's map api

JQUERY-UI-MAP“Uncaught TypeError：Object [object Object]没有方法'gmap'”

3 个答案: