Javascript GoogleMaps-jQuery-Php集成检查

我正在建设一个相当庞大的网站，它是WP驱动的，但使用谷歌地图作为主界面

我在管理端有一个页面，在那里我想通过拖动一个标记来选择一个位置，然后将该数据保存到MySQL（通过Php/wp函数）

问题是——尽管我的WP和PHP基础相当坚实，但我的JS或Jquery也相当基础，更不用说不稳固了

我通过阅读谷歌地图API、教程和示例“黑客”拼凑了一段代码- 它正确地生成地图和要拖动的标记，然后通过jQuery将[Lat，Lng]的值传递给TXT输入，然后保存到数据库中

一切正常-除了一个问题：

• 当我编辑或保存数据时-下次我将打开此“帖子”-没有标记，我需要创建一个新标记并再次保存

当我试图用simple获取输入字段的值时

var-LatPoint=jQuery（'[name=LatTxt]'）.val（）

及

placeMarker（新的google.maps.LatLng（LatPoint，LngPoint））

地图根本无法生成


第二个问题是拖动标记函数不会更新输入

第三点（也同样重要）是，我知道代码很糟糕，我相信有更好的方法来实现这一点——整个网站的目的也是我要学习的——我希望有人修改代码并建议如何优化它


这是我到目前为止的代码

var map;
var markersArray = [];// to be used later to clear overlay array
      jQuery(document).ready(function(){ 
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_2k"), myOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });

var marker;
 //Function to extract longitude

function placeMarker(location) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
    position: location,
    draggable: true, 
    title: 'Drag me',
     map: map
    });
    markersArray.push(marker); // to be used later to clear overlay array
  }
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}
//Jquery update HTML input boxes
function updatelonlat() {
jQuery('#LatTxt').val(marker.getPosition().lat());
jQuery('#LonTxt').val(marker.getPosition().lng());
}
// add event click
google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
 updatelonlat();
//var lat = parseFloat(document.getElementById('LatTxt').value); - somehow not working
});
//google.maps.event.addListener(marker, 'dragend', function(event) {
  //document.getElementById("#LatTxt").value = event.latLng.lat(); - somehow not working

map.setCenter(location);
         });

任何帮助都将不胜感激

编辑I

我已经建立了一个JSFIDLE：

显然，我不能模拟PHP函数，但它不是必需的。
我想要的是当页面加载/刷新/保存时-它将从输入框中的一个中心和一个带有值的标记开始。。。
另外-我刚才注意到拖动操作也没有更新，我不知道是JSFIDLE还是我的函数…
我已经修复了JSFIDLE中的代码：

问题是：

1） 在创建地图和设置中心之前，您没有读取输入值

2） 您试图使用
map.setCenter（location）
，但未设置
location
变量

3） 您从未调用过
placeMarker
函数，因此在用户单击地图之前从未放置过标记

4） 即使您没有使用
clearOverlays
函数，我还是将
for..in
循环中的
替换为常规的
for
。这样，您就不会迭代数组的属性（不仅仅是元素，还有数组对象的方法），而是只迭代数组中包含的元素

请注意，如果您在“ready”函数之外声明了函数，并且没有使用全局变量（如
marker
），那么您的代码可能更容易阅读，我已经在JSFIDLE中修复了您的代码：

问题是：

1） 在创建地图和设置中心之前，您没有读取输入值

2） 您试图使用
map.setCenter（location）
，但未设置
location
变量

3） 您从未调用过
placeMarker
函数，因此在用户单击地图之前从未放置过标记

4） 即使您没有使用
clearOverlays
函数，我还是将
for..in
循环中的
替换为常规的
for
。这样，您就不会迭代数组的属性（不仅仅是元素，还有数组对象的方法），而是只迭代数组中包含的元素

请注意，如果您在“ready”函数之外声明了函数，并且没有使用全局变量（如
marker
等），那么您的代码可能会更容易阅读。是否有什么地方可以看到此活动？是否有什么地方可以看到此活动？非常感谢！我将查看代码并尝试理解。请解释一下为什么将函数声明为“就绪”不好？我认为这个标记应该是全局的（我告诉过你-我不习惯JS-我只是粘贴了我找到的一些东西。）顺便说一句-拖动选项对我在你的小提琴上仍然不起作用..要支持拖动功能，只需添加一个事件处理程序：
google.maps.event.addListener（标记，'dragend'，function（event）{updatelonlat（）；}）。更不用说全球标记了。如果您只需要一个标记，那么“global”（因为实际上它不是真正的global）变量就可以了！伟人-再次感谢！我必须深入了解JS的内容。但一个问题是，谷歌地图api的文档记录似乎很差，而且经常发生变化。。无论如何，再次感谢。相反，我必须说，我发现它有很好的记录：）非常感谢！我将查看代码并尝试理解。请解释一下为什么将函数声明为“就绪”不好？我认为这个标记应该是全局的（我告诉过你-我不习惯JS-我只是粘贴了我找到的一些东西。）顺便说一句-拖动选项对我在你的小提琴上仍然不起作用..要支持拖动功能，只需添加一个事件处理程序：
google.maps.event.addListener（标记，'dragend'，function（event）{updatelonlat（）；}）。更不用说全球标记了。如果您只需要一个标记，那么“global”（因为实际上它不是真正的global）变量就可以了！伟人-再次感谢！我必须深入了解JS的内容。但一个问题是，谷歌地图api的文档记录似乎很差，而且经常发生变化。。无论如何，再次感谢。相反，我必须说，我发现它有很好的记录：）和