Как перетащить созданный маркер в API карты Google в определенную позицию? - PullRequest
Новая
       1

Как перетащить созданный маркер в API карты Google в определенную позицию?

0 голосов
/ 10 января 2012

На моем веб-сайте я интегрировал API карт Google и установил маркер, но теперь хотел бы реализовать возможность перетаскивания маркера в более конкретную / точную позицию.

Я скопировал код ниже, чтобы вы все могли видеть, карта работает правильно, но не может перетащить курсор.

Попытался добавить его в jsfiddle, но не уверен, как его использовать http://jsfiddle.net/TJ94t/

Помощь всегда приветствуется. 

//<![CDATA[
/*************************************************
 * Created with GoogleMapAPI3.0beta
 * Author: Brad Wedell <brad AT mycnl DOT com>
 * Link http://code.google.com/p/phpgooglemapapiv3/
 * Copyright 2010 Brad Wedell
 * Original Author: Monte Ohrt <monte AT ohrt DOT com>
 * Original Copyright 2005-2006 New Digital Group
 * Originial Link http://www.phpinsider.com/php/code/GoogleMapAPI/
 *************************************************/

                var markersmap  = [];

                    var sidebar_htmlmap  = '';
                    var marker_htmlmap  = [];

                var to_htmlsmap  = [];
                var from_htmlsmap  = [];
            var mapmap = null;
function onLoadmap() {
var mapObjmap = document.getElementById("map");
if (mapObjmap != 'undefined' && mapObjmap != null) {

                var mapOptionsmap = {
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.HYBRID,
                    mapTypeControl: true,
                    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT}
                };

                    mapOptionsmap.center = new google.maps.LatLng(
                        36.488804,
                        -4.998799
                    );

                mapmap = new google.maps.Map(mapObjmap,mapOptionsmap);
            var point = new google.maps.LatLng(36.4888036,-4.9987986);
markersmap.push(createMarker(mapmap, point,"Marker Title","Marker Description", '', '', "sidebar_map", '' ));


              }
}

           function createMarker(map, point, title, html, icon, icon_shadow, sidebar_id, openers){
                var marker_options = {
                    position: point,
                    map: map,
                    title: title};  
                if(icon!=''){marker_options.icon = icon;}
                if(icon_shadow!=''){marker_options.icon_shadow = icon_shadow;}
                //create marker
                var new_marker = new google.maps.Marker(marker_options);
                if(html!=''){

                    var infowindow = new google.maps.InfoWindow({content: html});
                    google.maps.event.addListener(new_marker, 'click', function() {
                      infowindow.open(map,new_marker);
                    });
                    if(openers != ''&&!isEmpty(openers)){
                       for(var i in openers){
                         var opener = document.getElementById(openers[i]);
                         opener.onclick = function(){infowindow.open(map,new_marker); return false};
                       }
                    }

                    if(sidebar_id != ''){
                        var sidebar = document.getElementById(sidebar_id);
                        if(sidebar!=null && sidebar!=undefined && title!=null && title!=''){
                            var newlink = document.createElement('a');

                            newlink.onclick=function(){infowindow.open(map,new_marker); return false};

                            newlink.innerHTML = title;
                            sidebar.appendChild(newlink);
                        }
                    }
                }
                return new_marker;  
            }
        function isArray(a) {return isObject(a) && a.constructor == Array;}
function isObject(a) {return (a && typeof a == 'object') || isFunction(a);}
function isFunction(a) {return typeof a == 'function';}
function isEmpty(obj) { for(var i in obj) { return false; } return true; }
//]]>
</script>
<!--Google map-->

1 Ответ

3 голосов
/ 10 января 2012

Добавьте свойство draggable при создании marker_options и установите для него значение true. 

var marker_options = {position: point, map: map, title: title, draggable: true};

Более подробная информация о marker_options (а также о событиях перетаскивания, на которые можно подписаться) находится в Документации Google Api Map.

...