如何将谷歌地图api中创建的标记拖动到特定位置?

时间:2012-01-10 13:43:40

标签: javascript google-maps google-maps-markers

在我的网站上,我整合了谷歌地图api并设置了一个标记,但现在想要实现将标记拖动到更具体/更准确位置的功能。

我已复制下面的代码供大家查看,正确映射功能,但无法拖动光标。

尝试将其添加到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 个答案:

答案 0 :(得分:3)

在创建marker_options时添加 draggable 属性并将其值设置为true。

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

有关marker_options(以及可订阅的拖动事件)的更多信息,请参阅Google's Map Api documentation.