Javascript 带有可拖动标记和输入框的谷歌地图搜索框

我正在使用谷歌地图api，需要显示一个带有搜索框的标记，该标记将使用我在数据库中的lat和long，但如果拖动或有人使用搜索框，则会更改。我设法加载地图并将其置于坐标中心，但在使用搜索框后，它没有显示标记。 我尝试在代码开头添加一个标记，但没有成功，当我使用函数时，它创建了一个新的标记：

var mapOptions = {
        zoom: zoom,
        center: LatLng,
        panControl: false,
        zoomControl: false,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }    

    var map = new google.maps.Map(document.getElementById('map'),mapOptions);
    var latitude = ;
    var longitude = ;
    var zoom = "+MapZoom+";

    var LatLng = new google.maps.LatLng(51.501476, ‎-0.140634);
    var marker = new google.maps.Marker({
        position: LatLng,
        map: map,
        title: '"+Latitude+"',
        draggable: true
    });

这是我目前的代码，我相信我只是错过了一些东西，任何帮助都将不胜感激

function initialize() {

var markers = [];
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(51.501476, ‎-0.140634));
    map.fitBounds(defaultBounds);
var input = (document.getElementById('pacinput')
);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox((input));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
  return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
  marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {

  var marker = new google.maps.Marker({
    draggable: true,
    map: map,

    title: place.name,
    position: place.geometry.location
  });
  // drag response
  google.maps.event.addListener(marker, 'dragend', function(e) {
    displayPosition(this.getPosition());
  });
  // click response
  google.maps.event.addListener(marker, 'click', function(e) {
    displayPosition(this.getPosition());
  });
  markers.push(marker);
  bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
// displays a position on two <input> elements
function displayPosition(pos) {
document.getElementById('Latitude').value = pos.lat();
document.getElementById('Longitude').value = pos.lng();
}
}  
google.maps.event.addDomListener(window, 'load', initialize);
initialize();
</script>"

函数初始化（）{
var标记=[]；
var map=new google.maps.map（document.getElementById（'map'）{
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var defaultBounds=new google.maps.LatLngBounds(
新google.maps.LatLng（51.501476，‎-0.140634));
map.fitBounds（defaultBounds）；
变量输入=（document.getElementById（'pacinput'））
);
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
var searchBox=newgoogle.maps.places.searchBox（（输入））；
google.maps.event.addListener（搜索框，'places_changed'，函数（）{
var places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
for（var i=0，marker；marker=markers[i]；i++）{
marker.setMap（空）；
}
标记=[]；
var bounds=new google.maps.LatLngBounds（）；
for（var i=0，place；place=places[i]；i++）{
var marker=new google.maps.marker({
真的，
地图：地图，
标题：place.name，
位置：place.geometry.location
});
//阻力响应
google.maps.event.addListener（标记'dragend'，函数（e）{
displayPosition（this.getPosition（））；
});
//单击响应
google.maps.event.addListener（标记，'click'，函数（e）{
displayPosition（this.getPosition（））；
});
标记器。推（标记器）；
扩展（place.geometry.location）；
}
映射边界（bounds）；
});
google.maps.event.addListener（映射'bounds_changed'，函数（）{
var bounds=map.getBounds（）；
searchBox.setBounds（边界）；
});
//显示两个图元上的位置
功能显示位置（pos）{
document.getElementById（'Latitude'）。value=pos.lat（）；
document.getElementById（“经度”）.value=pos.lng（）；
}
}  
google.maps.event.addDomListener（窗口“加载”，初始化）；
初始化（）；
"

根据我的理解，您希望将页面加载到地图居中的同一位置，尝试使用此标记

var map;
var marker;
$(document).ready(function(){
    initialize();
    drawmarker();
    darggable();
});

function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  map=new google.maps.Map(document.getElementById("googleMap"),mapProp);


}
function drawmarker(){
    marker = new google.maps.Marker({
        position : new google.maps.LatLng(51.508742,-0.120850),
        title:"this s it",
        map : map,
        draggable:true,
    })
}

使您的标记成为全局标记，现在在dragend上使用方法

function darggable(){
 google.maps.event.addListener(marker, 'dragend', function(e) {
                console.log(e.latLng.lat(),e.latLng.lng())

              });
}

---

现在您获得了latlng现在使用它显示在文本框中

您的问题似乎仍然不清楚。您可以详细说明吗？当然，我在中使用了该示例，但我希望它只使用一个标记。加载页面时，脚本将在该lat上缩放，并显示输入字段的长度，但不会显示可以拖放的标记删除。该标记仅在使用搜索框后显示，但我在初始化时需要它。请告诉我它是否有用，并提前感谢您查看它。您的代码包含无效边界：

var defaultBounds=new google.maps.LatLngBounds（new google.maps.LatLng（“+纬度+”，“+经度+”）；

，this

map.fitBounds（默认边界）；

不起作用。这就是IDE在脚本中传递值的方式。我已将其更改为一些随机值。这几乎是错误的，但此标记未链接到我的元素（“纬度”和“经度”）因此，当我拖动它或使用搜索框查找不更新值的位置时，我不理解你所说的链接是什么意思。我创建了一个小提琴来解释这个问题。问题是，当你拖放第一个标记时，它不会更新输入框，但如果使用搜索框并拖放新标记，它会更新输入框lat和液化天然气