JavaScript谷歌地图移动位置标记

我正在使用下面的JavaScript加载Google地图并以伦敦为中心。然后，用户可以移动地图并放置一个标记，我为其保存经度和纬度。代码在这方面工作得很好

$(document).ready(function() {
    var myLatLng = {lat: 51.5073509, lng: -0.12775829999998223};

    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(myLatLng),
            zoom: 13
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var input = /** @type {HTMLInputElement} */(
            document.getElementById('pac-input'));

            var types = document.getElementById('type-selector');
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);

            var infowindow = new google.maps.InfoWindow();
            var marker = new google.maps.Marker({
                draggable: true,
                map: map,
                anchorPoint: new google.maps.Point(myLatLng)
            });

            google.maps.event.addListener(marker, "mouseup", function(event) {
                $('#id_latitude').val(this.position.lat());
                $('#id_longitude').val(this.position.lng());
            });

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                infowindow.close();
                marker.setVisible(false);
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    return;
                }

                // If the place has a geometry, then present it on a map.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);
                }
                marker.setIcon(/** @type {google.maps.Icon} */({
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(35, 35)
                }));
                marker.setPosition(place.geometry.location);
                marker.setVisible(true);

                $('#id_latitude').val(place.geometry.location.lat());
                $('#id_longitude').val(place.geometry.location.lng());

                var address = '';
                if (place.address_components) {
                    address = [
                    (place.address_components[0] && place.address_components[0].short_name || ''),
                    (place.address_components[1] && place.address_components[1].short_name || ''),
                    (place.address_components[2] && place.address_components[2].short_name || '')
                    ].join(' ');
                }

                infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
                infowindow.open(map, marker);
            });
        }

        if ($('#map-canvas').length != 0) {
            google.maps.event.addDomListener(window, 'load', initialize);
        }

    });

$（文档）.ready（函数（）{
var myLatLng={lat:51.5073509，lng:-0.127758299998223}；
函数初始化（）{
变量映射选项={
中心：新的google.maps.LatLng（myLatLng），
缩放：13
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
变量输入=/**@type{HTMLInputElement}*/(
document.getElementById（'pac-input'）；
var types=document.getElementById（'type-selector'）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
map.controls[google.maps.ControlPosition.TOP\u LEFT].push（类型）；
var autocomplete=new google.maps.places.autocomplete（输入）；
autocomplete.bindTo（'bounds'，map）；
var infowindow=new google.maps.infowindow（）；
var marker=new google.maps.marker({
真的，
地图：地图，
主播点：新google.maps.Point（myLatLng）
});
google.maps.event.addListener（标记“mouseup”，函数（事件）{
$（'#id_lation'）.val（this.position.lat（））；
$（'#id_longitude'）.val（this.position.lng（））；
});
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
infowindow.close（）；
marker.setVisible（假）；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
返回；
}
//如果该地点有几何图形，则将其显示在地图上。
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；
}
marker.setIcon（/**@type{google.maps.Icon}*/({
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize：新的google.maps.Size（35,35）
}));
标记器.设置位置（位置.几何.位置）；
marker.setVisible（true）；
$（'#id_latitude'）.val（place.geometry.location.lat（））；
$（'#id_longitude'）.val（place.geometry.location.lng（））；
var地址=“”；
if（位置、地址和组件）{
地址=[
（place.address_components[0]&&place.address_components[0]。简称| | |“”），
（place.address_components[1]&&place.address_components[1]。简称| | |“”），
（place.address_components[2]&&place.address_components[2]。简称| |“”）
].加入（“”）；
}
infowindow.setContent（“”+place.name+”
“+地址）；
信息窗口。打开（地图、标记）；
});
}
如果（$（'#地图画布'）。长度！=0）{
google.maps.event.addDomListener（窗口“加载”，初始化）；
}
});

---

我想修改代码，这样当我重新加载用户的信息时，它会自动转到他们设置的标记，他们可以将其移动到另一个位置。我想不出怎么做。请提供帮助。

首先，要更改标记的位置，应在创建标记对象后将其保留为全局变量，以便可以在

initialize

函数之外的其他位置对其进行编辑

重新加载用户信息后，可以通过以下方式更改标记的位置：

var latlng = new google.maps.LatLng(-24.397, 140.644);  // new latlng here.
marker.setPosition(latlng);    // marker is what you keeped global.

我对Django框架一无所知，如果它支持回调或类似的东西，请在那里进行更改

var-markerGlobal；
函数initMap（）{
var mylatng={
lat:-25.363，
液化天然气：131.044
};
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：myLatLng
});
var marker=new google.maps.marker({
职位：myLatLng，
真的，
地图：地图，
标题：“你好，世界！”
});
markerGlobal=标记；
}
函数changeMarkerPosition（）{
var newLatlng=newgoogle.maps.LatLng（-24.397131.084）；
标记全局设置位置（newLatlng）；
}

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}

点击我！

您所说的“重新加载用户信息”是什么意思？这是在做ajax调用还是其他什么？我正在使用Python和Django框架。这将使用Django表单进行调用，我保留前面标记的纬度和经度。我想获取数据，将地图放在标记的中心（我可以这样做），并能够移动标记（我不能）。给定myLat和myLon的输入，我如何打开标记并使其移动到不同的位置？这只是隐藏我的位置字段，而不是显示marker@HenryM我已经添加了一个代码段，可以正常工作。检查一下。也许如果新位置不在缩放范围内，您应该调用setCenter additional。我无法移动此代码段上的标记。标记保持在同一位置，地图移动。@HenryM再次检查。我已经添加了标记的拖拽功能，你已经完成了它根据你的代码张贴。