Google Maps API：如何将两个脚本合二为一？

Question

我正在尝试使用 Google Map API 做一些事情： - 让用户能够单击并向地图添加标记，将该位置保存到 xml 文件，然后发送带有坐标的电子邮件 - 直接地址搜索（地理位置） - 可以打开或关闭多个 KML 图层

我想只使用 javascript/jquery/ajax 和可能的 php 来写入 xml 文件。

我在这里找到了一个例子：http://www.designing4u.de/2008/08/google-maps-jquery-and-xml-saving-markers-with-user-input/

但这是在 API V2 中 - 我需要 API V3。

这里是我迄今为止提出的链接......

'http://www.powereng.com/visual/AEP/SAMPLEcode2.html'
'http://www.powereng.com/visual/AEP/SAMPLEcode4.html'

这是我将这两者结合在一起的尝试：

'http://www.powereng.com/visual/AEP/SAMPLEcode5.html'

我需要一些关于如何做到这一点的建议 - 我对 JavaScript 语法的了解有限。

还非常感谢任何有关设置可以将标记保存到 xml 文件的内容的帮助！

Answer 1

尝试一些类似的想法：

    // INIT ALL VARS
    var geocoder = new google.maps.Geocoder();
    var newmarker;
    var map;
    var kmlLayer = null;
    var trafficLayer = null;
    var bicyclingLayer = null;
    var currentLayer = null;

    function geocodePosition(pos) {
      geocoder.geocode({
        latLng: pos
      }, function(responses) {
        if (responses && responses.length > 0) {
          updateMarkerAddress(responses[0].formatted_address);
        } else {
          updateMarkerAddress('Cannot determine address at this location.');
        }
      });
    }

    function updateMarkerStatus(str) {
      document.getElementById('markerStatus').innerHTML = str;
    }

    function updateMarkerPosition(latLng) {
      document.getElementById('info').innerHTML = [
        latLng.lat(),
        latLng.lng()
      ].join(', ');
    }
    function updateMarkerLat(latLng) {
      document.getElementById('latnew').innerHTML = [
         latLng.lat()
      ];
    }
    function updateMarkerLng(latLng) {
      document.getElementById('lngnew').innerHTML = [
        latLng.lng()
      ];
    }

    function updateMarkerAddress(str) {
      document.getElementById('address').innerHTML = str;
    }


// INITIALISE THE MAP
function initialize() {

  var latLng = new google.maps.LatLng(42.3726399, -71.1096528); // YOUR LAT / LONG
  var map = new google.maps.Map(document.getElementById('mapCanvas'), { // YOUR MAP ID
    zoom: 13,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // TRAFIC
  trafficLayer      = new google.maps.TrafficLayer();
  bicyclingLayer    = new google.maps.BicyclingLayer();
  kml('http://www.swepco.com/global/utilities/lib/data/kml/swepco/shipe-kings/FinalSixRoutesWithLabelsandEndpoints.kmz?t=asdfsd');


  function traffic() {
    geocoder = new google.maps.Geocoder();
    map.setCenter(new google.maps.LatLng(40.7142691, -74.0059729));
    map.setZoom(12);
    clearLayer();
    trafficLayer.setMap(map);
    currentLayer = trafficLayer;
  }

  function bicycling() {
    geocoder = new google.maps.Geocoder();
    map.setCenter(new google.maps.LatLng(42.3726399, -71.1096528));
    map.setZoom(14);
    clearLayer();
    bicyclingLayer.setMap(map);
    currentLayer = bicyclingLayer;
  }

  function kml() {
    url = document.getElementById("kmlUrl").value;
    clearLayer();
    kmlLayer = new google.maps.KmlLayer(url, { map: map });
    currentLayer = kmlLayer;
  }

  function clearLayer() {
    if (currentLayer != null) {
      currentLayer.setMap(null);
    }
  }

  function kmlKeyUp(e) {
    var keyCode;

    if (window.event) {
        keyCode = window.event.keyCode;
    } else if (variable) {
        keyCode = e.which;
    }

    if (keyCode == 13) {
        document.getElementById("kmlUrl").blur();
        document.getElementById("kmlButton").click();
    }
  }

  function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });



  // DBCLICK EVENT
  google.maps.event.addListener(map, "dblclick", function(event) {
        placeMarker(event.latLng);
    });

    // ADD A MARKER
    function placeMarker(location) {
        var newmarker = new google.maps.Marker({
            position: location,
            map: map,
            draggable: true
        });

    // CLICK EVENT    
    google.maps.event.addListener(newmarker, 'click', function() {
    var form = 
        '<div id="bodyContent">'+
        '<b>New Map</b>' +
        '<form method="post">'+
        '<table>'+
        '<tr><td>Name place :<input type="text" name="name"/></td></tr>'+
        '<tr><td>Latitude :<input type="text" name="latitude" value="' + newmarker.position.lat() + '"/></td></tr>'+
        '<tr><td>Longitude: <input type="text" name="longitude" value="' + newmarker.position.lng() + '"/></td></tr>'+
        '<tr><td><input type="submit" value="save"></td></tr>'+
        '</table>'+
        '</form>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: form,
        maxWidth :500
    });

    infowindow.open(map,newmarker);
    });

        // Update current position info.
        updateMarkerPosition(latLng);
        updateMarkerLat(latLng);
        updateMarkerLng(latLng);
        geocodePosition(latLng);

        // Add dragging event listeners.
        google.maps.event.addListener(newmarker, 'dragstart', function() {
            updateMarkerAddress('Dragging...');
        });

        google.maps.event.addListener(newmarker, 'drag', function() {
            updateMarkerStatus('Dragging...');
            updateMarkerPosition(newmarker.getPosition());
            updateMarkerLat(newmarker.getPosition());
            updateMarkerLng(newmarker.getPosition());
        });

        google.maps.event.addListener(newmarker, 'dragend', function() {
            updateMarkerStatus('Drag ended');
            geocodePosition(newmarker.getPosition());
            updateMarkerLat(newmarker.getPosition());
            updateMarkerLng(newmarker.getPosition());
        });
    }


}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);