Как правильно добавитьShape() на карту google с помощью jquery-ui-map

Я использую следующий код, чтобы добавить фигуру на карту с помощью jquery, jqueryui-map и API карт Google.

$('#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 });
            }
});

Я также попытался вызвать метод .addShape для $('#map_canvas'). но я получаю только следующую ошибку:

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 google-maps-api-3 jquery-ui jquery-ui-map
person wzr1337    schedule 05.07.2012    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Была та же проблема, возникшая из той же документации, в которой не упоминалось о включении 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

person Moak    schedule 12.07.2012
comment
Большое спасибо, вы сделали мой день!! - person wzr1337; 14.07.2012

arrow_upward
1
arrow_downward

Я прокомментировал 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>

это приводит к тому, что объект # не имеет ошибки метода 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>

в любом случае спасибо Моак!! это действительно помогло.

person Professor Ez    schedule 19.06.2013
comment
Кажется, это зависит от того, какие функции на самом деле использует ваш код, тогда вы выберете погоду, в которой вам нужен extensions.js. - person Moak; 16.11.2013

arrow_upward
0
arrow_downward

должно быть так:

<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>
person Community    schedule 01.03.2014