Question

所以我正在尝试将两个Google Maps API教程合并到一个地图中。 This documentation和this one。

我习惯在样本页面上显示两个地图，现在我想要一个。除了我尝试将内容保存到数据库时，一切正常。 document.getElementbyId不会从信息窗口中的表单返回任何内容，只返回坐标。

当地图分开时，它会起作用，但当它们在一起时则不起作用。

这是我合并的代码：

var customIcons = {
  blue: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  red: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
};

var locationInfowindow;
var locationMarker;

function initialize() {
//get the html from the water
    var waterHTML = "Why is water important in your community?" +
            "<table>" +
             "<tr><td>Name:</td> <td><input type='text' id='watername'/> </td> </tr>" +
             "<tr><td>School:</td> <td><input type='text' id='wateraddress'/></td> </tr>" +
             "<tr><td>Reason:</td> <td><input type='text' id='waterreason'/> </td></tr>" +
             "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";


//setup Map 
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(37.926868, -104.501953),
    zoom: 5,
    mapTypeId: 'roadmap'
  });

  //start the markers from the database
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadXMLUrl('mapxml.php', function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("school");
      var math = markers[i].getAttribute("reason");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/> <i>" + address + "</i><br/>" +math ;
      var icon = customIcons['blue'] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });

        //Try HTML5 geolocation
  if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);

     locationInfowindow = new google.maps.InfoWindow({
        content: waterHTML
     });

     locationMarker = new google.maps.Marker({
        draggable: true,
        position: pos,
        map: map,
        title: 'Water Event'
    });

    locationInfowindow.open(map,locationMarker);
            map.setCenter(pos);
      }, function() {
        handleNoGeolocation(true);
      });

    } else {
      // Browser doesn't support Geolocation
      handleNoGeolocation(false);
    }

}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}


function downloadXMLUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}



 function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
      var content = 'Your browser doesn\'t support geolocation.' + '</br>'+
            "Why is water important in your community?” " +
            "<table>" +
             "<tr><td>Name:</td> <td><input type='text' id='watername'/> </td> </tr>" +
             "<tr><td>School:</td> <td><input type='text' id='wateraddress'/></td> </tr>" +
             "<tr><td>Reason:</td> <td><input type='text' id='waterreason'/> </td></tr>" +
             "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
    } else {
      var content = 'Error: Your browser doesn\'t support geolocation.' + '</br>' + html;
    }

    var options = {
      map: map,
      position: new google.maps.LatLng(37.926868, -104.501953),
      content: content
    };

    locationInfowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
  }

  google.maps.event.addDomListener(window, 'load', initialize);

function saveData() {

  var watername = escape(document.getElementById("watername").value);

  console.log(watername);
  var wateraddress = escape(document.getElementById("wateraddress").value);

  console.log(wateraddress);
  var waterreason = document.getElementById("waterreason").value;
  console.log(waterreason);

  var latlng = locationMarker.getPosition();

  var url = "phpsqlinfo_addrow.php?name=" + watername + "&school=" + wateraddress + "&reason=" + waterreason + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();

  console.log(url);

  downloadUrl(url, function(data, responseCode) {

  console.log("inurl");
   // if (responseCode == 200 && data.length <= 1) {
      locationInfowindow.close();
      document.getElementById("message").innerHTML = "Location added. Refresh to see your addition!";
   // }
  });
}


function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request.responseText, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}




function doNothing() {}

Answer 1

我无法确切地告诉你为什么会这样，但文档中有一些垃圾，是waterHTML的隐藏节点副本。

getElementById()检索文档中具有给定ID的第一个元素，因此您始终可以获取此副本的值而不是所需的值。在第一次按下按钮后，将以某种方式删除此副本。

建议：您可以从返回的nodeList中检索最后一项，而不是ID使用name-attributes：

  var waternames = document.getElementsByName("watername");
  var watername = escape(waternames[waternames.length-1].value);
  //the same for waterreason and wateraddress

Document.getElementById在Google地图信息窗口中不起作用

1 个答案: