如何在带有 jquery-ui-map 的谷歌地图上正确地 addShape()答案

【问题标题】：How to addShape() on a google map with jquery-ui-map correctly如何在带有 jquery-ui-map 的谷歌地图上正确地 addShape()
【发布时间】：2012-07-05 14:35:03
【问题描述】：

我正在使用以下代码通过 jquery、jqueryui-map 和 google maps API 向地图添加形状

$('#map_canvas').gmap('getCurrentPosition', function(position, status) {
            if ( status === 'OK' ) {
                var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                $('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': false});
                $("#map_canvas").gmap("option", "center", clientPosition);
                $('#map_canvas').gmap('option', 'zoom', 14);
                $('#map_canvas').gmap('addShape', 'Circle', {
                    'strokeColor': "#008595",
                    'strokeOpacity': 0.8,
                    'strokeWeight': 2,
                    'fillColor': "#008595",
                    'fillOpacity': 0.35,
                    'center': clientPosition,
                    'radius': 50,
                    'clickable': false });
            }
});

我还尝试在 $('#map_canvas') 上调用 .addShape 方法。但我只收到以下错误：

Uncaught TypeError: Cannot call method 'apply' of undefined jquery.ui.map.js:46
$.a.$.fn.(anonymous function) jquery.ui.map.js:46
e.extend.each jquery.min.js:2
e.fn.e.each jquery.min.js:2
$.a.$.fn.(anonymous function) jquery.ui.map.js:40
(anonymous function) :8080:397
$.extend.getCurrentPosition

有谁知道如何解决这个问题？ http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-geolocation.html 上的示例出于某种原因有效.. 我只是无法弄清楚实际的区别.. 也许我现在失明了 ;)

谢谢，

拍拍

【问题讨论】：

标签： jquery jquery-ui google-maps-api-3 jquery-ui-map

【解决方案1】：

有同样的问题，产生于相同的文档，但没有提到包含jquery.ui.map.overlays.js

代码说

<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" src="PATH_TO_PLUGIN/jquery.ui.map.extensions.js"></script>

事实上你需要

<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" src="PATH_TO_PLUGIN/jquery.ui.map.overlays.js"></script>

事实上，经过测试，没有jquery.ui.map.extensions.js也可以工作

【讨论】：

非常感谢，你让我开心！

【解决方案2】：

我评论了 jquery.ui.map.extensions.js 并添加了 jquery.ui.map.overlays.js 但它没有帮助

<script type="text/javascript" charset="utf-8" src="js/jquery-1.9.1.min.js"> </script> 
<script type="text/javascript" src="js/jquery.ui.map.js"></script> 
<!--script type="text/javascript" src="js/jquery.ui.map.extensions.js"></script--> 
<script type="text/javascript" src="js/jquery.ui.map.overlays.js"></script>

这导致 Object # has no method 'getCurrentPosition' 错误。

然后我取消注释 jquery.ui.map.extensions.js 然后它对我有用。

<script type="text/javascript" charset="utf-8" src="js/jquery-1.9.1.min.js"> </script> 
<script type="text/javascript" src="js/jquery.ui.map.js"></script> 
<script type="text/javascript" src="js/jquery.ui.map.extensions.js"></script> 
<script type="text/javascript" src="js/jquery.ui.map.overlays.js"></script>

无论如何，谢谢 Moak！真的很有帮助。

【讨论】：

这似乎取决于您的代码实际使用的功能，然后您会选择需要 extensions.js 的天气

【解决方案3】：

一定是这样的：

<script type="text/javascript" src="jquery/2.1.0/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="jquery-ui-map/3.0-rc/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript" src="jquery-ui-map/3.0-rc/ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript" src="jquery-ui-map/3.0-rc/ui/jquery.ui.map.overlays.js"></script>

【讨论】：