javascript - Google map - jQuery - Php 集成检查

Question

我正在构建一个相当庞大的网站，该网站由 WP 驱动，但使用 Google map 作为主界面。

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

问题是 - 尽管我的 WP 和 PHP 基础相当扎实，但我的 JS 或 Jquery 却相当基础，更不用说摇摇欲坠了。

我通过阅读 Google map API、教程和示例“破解”了一段代码 -它正确生成 map 以及要拖动的标记，然后通过 jQuery 将 [Lat,Lng] 的值传递到 TXT 输入 - 然后将其保存到数据库中。

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

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

当我尝试使用简单的方法获取输入字段的值时var LatPoint = jQuery('[name=LatTxt]').val()

和

placeMarker(new google.maps.LatLng(LatPoint,LngPoint));

map 根本无法生成。

• 第二个是拖动标记功能不会更新输入。

• 第三个(同样重要的)是我知道代码很糟糕，而且我确信有更好的方法来实现这一点 - 而且整个网站的目的也是为了让我学习 - 我希望有人修改代码并就如何优化它提出建议..

这是我到目前为止的代码..

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);
         });

任何帮助将不胜感激..

编辑我

我已经设置了一个JSFIDDLE:http://jsfiddle.net/obmerk99/fSj9F/1/

显然我无法模拟 PHP 函数 - 但它不是必需的。我想要的是当页面加载/刷新/保存时 - 它将以一个中心和一个带有来自输入框的值的标记开始......另外 - 我刚刚注意到拖动操作也没有更新，我不知道它是 jsfiddle - 还是我的函数......

Answer 1

我已在 JSFiddle 中修复了您的代码:http://jsfiddle.net/fSj9F/2/

问题是:

1) 在创建 map 并设置中心之前，您没有读取输入的值。

2) 您尝试使用map.setCenter(location)，但未设置location变量

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

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

请注意，如果您在“就绪”函数之外声明了函数，并且没有使用 marker 等全局变量，那么您的代码可能会更容易阅读。