0

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

当我使用 html 文件进行原型设计时，它运行良好。一旦我开始在 MVC4 项目中使用嵌入代码并使用 iis express 进行调试，我会在 Google Chrome 开发人员工具中出现错误“未捕获的类型错误：对象 [对象对象] 没有方法 '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>
4

3 回答 3

2

您正在包括 gmap3 但正在调用.gmap(...). gmap3 文档中的示例使用.gmap3(...).

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

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

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

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

于 2012-10-19T02:24:03.540 回答
0

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

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

于 2012-10-19T00:37:28.460 回答
0

我有同样的问题，发现这是由于多个 jquery 引用。

我的 _layout.cshtml 通过正文部分中的以下行加载 jquery：@Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false)

看来这实际上覆盖了我认为的参考。由于最好只在一个地方加载引用，因此我将其从视图中删除，但是随后出现了一个错误，即 jQuery 没有定义。我不得不将 @Scripts.Render 从正文部分（由 nuget 放置在那里）移动到该部分，一切正常。

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

这个线程给了我线索： “gmap is not a function”when using Google's map api

于 2012-12-11T01:11:26.927 回答