google-maps - Google Maps API - 一张地图内的两个地理编码服务

Question

我尝试在一张地图中使用两个地理编码服务（1 个用于可拖动标记，1 个用于通过文本框进行简单地理编码）但我没有任何结果（标记）显示用于通过地图内的文本框进行简单地理编码，我找不到原因为了这。代码如下：

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href="Free-Camping/free_camping_style.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Free Camping</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
    <script type="text/javascript">
<!--
//<![CDATA[

//*** Markers cluster 1/3 - Start *** //
var markerscluster = [];
//*** Markers cluster 1/3 - End *** //

var geocoder2;

//*** Dragable Marker 1/3 - Start *** //
var geocoder = new google.maps.Geocoder();

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').value = [
    latLng.lat(),
    //latLng.lng()
  ].join(', ');
    document.getElementById('info2').value = [
    //latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}
//*** Dragable Marker 1/3 - End *** //



function load() {

//*** Styled Maps 1/2 - Start *** //
  var styles = [
  {
  },
  {
    "featureType": "landscape",
    "stylers": [
      { "hue": "#ffa200" },
      { "saturation": 27 },
      { "gamma": 0.34 },
      { "lightness": 26 }
    ]
  },{
    "featureType": "administrative.country",
    "stylers": [
      { "hue": "#ff1100" },
      { "saturation": 45 },
      { "lightness": -20 },
      { "gamma": 1.82 }
    ]
  },{
    "featureType": "administrative.province",
    "stylers": [
      { "hue": "#ff1100" },
      { "lightness": -21 },
      { "gamma": 0.91 },
      { "saturation": 14 }
    ]
  },{
    "featureType": "administrative.locality",
    "stylers": [
      { "hue": "#0008ff" },
      { "saturation": 15 },
      { "lightness": -26 },
      { "gamma": 0.74 }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "gamma": 2.01 },
      { "lightness": -70 }
    ]
  }
];

var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});
//*** Styled Maps 1/2 - End *** //

      var latLng = new google.maps.LatLng(-25.878994,134.018553);  
      geocoder2 = new google.maps.Geocoder();
      var map = new google.maps.Map(document.getElementById("map"), {
        center: latLng,
        zoom: 4,
        mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        } 
       });


//*** Styled Maps 2/2 - End *** //
       map.mapTypes.set('map_style', styledMap);
       map.setMapTypeId('map_style');
//*** Styled Maps 2/2 - End *** //


      // Change this depending on the name of your PHP file
      downloadUrl("free_camping_phpsql.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var category = markers[i].getAttribute("category");
          var name = markers[i].getAttribute("name");
          var street = markers[i].getAttribute("street");
          var locality = markers[i].getAttribute("locality");
          var description = markers[i].getAttribute("description");
          var image = markers[i].getAttribute("image");
          var toilet = markers[i].getAttribute("toilet");
          var bbq = markers[i].getAttribute("bbq");
          var able = markers[i].getAttribute("able");
          var tentok = markers[i].getAttribute("tentok");
          var caravanok = markers[i].getAttribute("caravanok");
          var dumppoint = markers[i].getAttribute("dumppoint");
          var shade = markers[i].getAttribute("shade");
          var water = markers[i].getAttribute("water");
          var swimming = markers[i].getAttribute("swimming");
          var fishing = markers[i].getAttribute("fishing");
          var hiking = markers[i].getAttribute("hiking");
          var mobileok = markers[i].getAttribute("mobileok");
          var name2 = markers[i].getAttribute("name2");
          var email = markers[i].getAttribute("email");
          var lat = markers[i].getAttribute("lat");
          var lng = markers[i].getAttribute("lng");

          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));

         var html = 
         '<img src="Free-Camping/images2/amenitiesicons/'+toilet+'" >'   
         + '<img src="Free-Camping/images2/amenitiesicons/'+bbq+'" >' 
         + '<img src="Free-Camping/images2/amenitiesicons/'+able+'" >'
         + '<img src="Free-Camping/images2/amenitiesicons/'+tentok+'" >'
         + '<img src="Free-Camping/images2/amenitiesicons/'+caravanok+'" >'
         + '<img src="Free-Camping/images2/amenitiesicons/'+dumppoint+'" >' 
         + '<img src="Free-Camping/images2/amenitiesicons/'+shade+'" >'
         + '<img src="Free-Camping/images2/amenitiesicons/'+water+'" >'
         + '<img src="Free-Camping/images2/amenitiesicons/'+swimming+'" >'
         + '<img src="Free-Camping/images2/amenitiesicons/'+fishing+'" >'
         + '<img src="Free-Camping/images2/amenitiesicons/'+hiking+'" >'
         + '<img src="Free-Camping/images2/amenitiesicons/'+mobileok+'" >' + '<br>'

         + '<p style="font-family: calibri, corbel, verdana; color: #621c11; font-size: 18px; font-weight: bold; text-align: left">' + name + '</p>'  
         + '<p style="font-family: calibri, corbel, verdana; color: #ofofof; font-size: 14px; text-align: left">' + street + '<br>' 
         + locality + '<br>'
         + lat + ', &nbsp;' + lng + '</p>'  
         + '<img src="Free-Camping/images/'+image+'" height=80;>' + '<br>'
         + '<a href="Free-Camping/images/'+image+'" target="_blank">(enlarge image)' + '</a>'
         + '<p style="font-family: calibri, corbel, verdana; color: #0f0f0f; font-size: 13px; text-align: left">' + description  + '</p>'
         // Checkbox
         ;


         var infoWindow = new google.maps.InfoWindow({
         content: html,
         maxWidth: 380
         });



 var customIcons = {
      "1": {
        icon: 'Free-Camping/markers/RoadsideRestArea.png',
      },      
      "2": {
        icon: 'Free-Camping/markers/BushCampingSite.png',
      },  
      "3": {
        icon: 'Free-Camping/markers/ParkForestReserve.png',
      },
      "4": {
        icon: 'Free-Camping/markers/PrivateCampingSite.png',
      },
      "5": {
        icon: 'Free-Camping/markers/BeachCampingSite.png',
      },
          "6": {
        icon: 'Free-Camping/markers/BeachCampingSite.png',
      }
    };

          var icon = customIcons[category] || {};

          var marker = new google.maps.Marker({
            //map: map,
            position: point,
            icon: icon.icon,
          });

//*** Markers cluster 2/3 - Start *** //
markerscluster.push(marker);
//*** Markers cluster 2/3 - End *** //

        bindInfoWindow(marker, map, infoWindow, html); 
        }   

//*** Markers cluster 3/3 - Start *** //
var markerCluster = new MarkerClusterer(map, markerscluster, {
    gridSize: 60,
    minimumClusterSize: 1,
    maxZoom: 5  
});
//*** Markers cluster 3/3 - End *** //


//*** Dragable Marker 2/3 - Start *** //
      var marker2 = new google.maps.Marker({
      position: latLng,
      title: 'Point A',
      map: map,
      draggable: true
      });

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

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

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

    google.maps.event.addListener(marker2, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker2.getPosition());
    });
//*** Dragable Marker 2/3 - End *** //

      });  
    }


function codeAddress() {
  var address2 = document.getElementById('address2').value;
  geocoder2.geocode( { 'address2': address2}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
          var marker3 = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}


    //*** Dragable Marker 3/3 - Start *** //
    // Onload handler to fire off the app. 
    google.maps.event.addDomListener(window, 'load');
    //*** Dragable Marker 3/3 - End *** //


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

    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, request.status);
        }
      };

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

    function doNothing() {}

//]]>
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


</head>

<body onload="load();">

<div id="main_layer" style="position:absolute; left:0; top:0px; width:788px; height:1655px; margin-left: 0px;">

<div id="map_layer" style="position:absolute; left:0px; top:0px; width:780px; height:595px;" class="map_frame">
<div id="map_centre_icon" style="position:absolute; top:11px; width:25px; height:25px; margin-left: 715px; "><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','Free-Camping/images2/MapCentreIcon_2.png',1)"><img src="Free-Camping/images2/MapCentreIcon_1.png" name="Image7" width="24" height="24" border="0" onclick="load();" ></a></div>
<div id="map" style="position:absolute; top:45px; width:760px; height:500px; margin-left: 10px; "></div>


<div id="legend" style="position:absolute; top:555px; width:760px; height:27px; margin-left: 10px;">

<div id="text Beach Camping Site" style="position:absolute; top:2px; width:100px; height:15px; margin-left: 27px;"><span class="legend_text">Beach Camping Site</span>
</div>

<div id="text Bush Camping Site" style="position:absolute; top:2px; width:100px; height:15px; margin-left: 179px;"><span class="legend_text">Bush Camping Site</span>
</div>

<div id="text Park Forest Reserve" style="position:absolute; top:2px; width:100px; height:15px; margin-left: 331px;"><span class="legend_text">Park Forest Reserve</span>
</div>

<div id="text Private CampingS Site" style="position:absolute; top:2px; width:100px; height:15px; margin-left: 483px;"><span class="legend_text">PrivateCampingSite</span>
</div>

<div id="text Roadside Rest Area" style="position:absolute; top:2px; width:100px; height:15px; margin-left: 635px;"><span class="legend_text">Roadside Rest Area</span>
</div>
<img src="Free-Camping/images2/background-legend.png" width="760" height="27"></div>


<div id="form" style="position:absolute; left:0px; margin-left: 0px; top:603px; width:788px; height:1030px; background-color: #f4f4f4; layer-background-color: #f4f4f4; border: 1px none #000000;" class="form">
<form action="free_camping_insert.php" method="post" enctype="multipart/form-data">

<div id="form" style="position:absolute; left:14; top:0px; width:760px; height:255px;" class="form2">
  <p align="center" class="headers">Add a New Free Camping Site</p>
  <p align="center"><span class="text">Your Name:</span>      <input type="text" name="name2" />
      <br>
      <br>

      <span class="text">Your Email:</span>  
      <input type="text" name="email" />
  <br>
  <br>

  <span class="text">Campsite name:</span>  
  <input type="text" name="name" />
  <br>
  <br>

  <span class="text">Type of Campsite:</span>
  <select name="category">
    <option value="5">Beach Camping Site</option>
    <option value="2">Bush Camping Site</option>
    <option value="3">Park Forest Reserve</option>
    <option value="4">Private Camping Site</option>
    <option value="1">Roadside Rest Area</option>
  </select>
  <p align="center" class="text">
  <label>Upload Picture</label>
 <input type="file" name="image" /><br>
</div>

<div id="form" style="position:absolute; left:14; top:255px; width:760px; height:150px;" class="form2">
  <p align="center" class="headers">Select Campsite Amenities</p>
  <p align="center"><img src="Free-Camping/images2/AmenitiesIcons.png" width="682" height="44">   </p>

  <div id="checkbox1" style="position:absolute; left:50px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="toilet" value="No">
  <input type="checkbox" name="toilet" value="toilet.png">
  </div>

  <div id="checkbox2" style="position:absolute; left:108px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="bbq" value="No">
  <input type="checkbox" name="bbq" value="bbq.png">
  </div>

  <div id="checkbox3" style="position:absolute; left:165px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="able" value="No">
  <input type="checkbox" name="able" value="able.png">
  </div>

  <div id="checkbox4" style="position:absolute; left:223px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="tentok" value="No">
  <input type="checkbox" name="tentok" value="tent.png">
  </div>

  <div id="checkbox5" style="position:absolute; left:281px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="caravanok" value="No">
  <input type="checkbox" name="caravanok" value="caravan.png">
  </div>

  <div id="checkbox6" style="position:absolute; left:338px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="dumppoint" value="No">
  <input type="checkbox" name="dumppoint" value="dumppoint.png">
  </div>

  <div id="checkbox7" style="position:absolute; left:398px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="shade" value="No">
  <input type="checkbox" name="shade" value="shade.png">
  </div>

  <div id="checkbox8" style="position:absolute; left:454px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="water" value="No">
  <input type="checkbox" name="water" value="water.png">
  </div>

  <div id="checkbox9" style="position:absolute; left:512px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="swimming" value="No">
  <input type="checkbox" name="swimming" value="swimming.png">
  </div>

  <div id="checkbox10" style="position:absolute; left:570px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="fishing" value="No">
  <input type="checkbox" name="fishing" value="fishing.png">
  </div>

  <div id="checkbox11" style="position:absolute; left:629px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="hiking" value="No">
  <input type="checkbox" name="hiking" value="hiking.png">
  </div>

  <div id="checkbox12" style="position:absolute; left:687px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="mobileok" value="No">
  <input type="checkbox" name="mobileok" value="mobile.png">
  </div>

  <p align="center"><br>
</div>

<div id="form" style="position:absolute; left:14; top:405px; width:760px; height:575px;" class="form2"> 
  <div align="center"><span class="headers">Description of the Campsite </span><span class="text">(tell as a bit about the site)</span>    </p>
  </div>
  <p align="center">    <textarea name="description" cols="85" rows="7" class="borders_around_form_boxes"></textarea>
    <br>
    </p>
  <p align="center" class="headers">Location of the Free Campsite</p>
  <p align="center" class="text">Enter the GPS coordinates in the boxes to create a new marker.</p>
  <div align="center"><br align="center" class="text"> 
      <span class="text">You can be oriented by red marker that are displayed in the map centar, which you can drag and drop on the map.</span> </br>
  </div>
  <div class="text" id="infoPanel">
    <div align="center"><b>Marker status:</b>
    </div>
    <div align="center" id="markerStatus">
      <div align="center"><i>Click and drag the marker.</i></div>
    </div>
    <div align="center"><b>Closest matching address:</b>
    </div>
    <div align="center" id="address"></div>
  </div>

            <p align="center"><span class="text">Latitude:</span>
              <input size="20" type="text" align="center" id="info" name="lat" /><br>
            <br>
            <span class="text">Longitude:</span>        
            <input size="20" type="text" align="center" id="info2" name="lng"/><br>
            <br>

              <span class="text">Tick this box to prove you're human</span>
              <input type="checkbox" name="human" value="1">
              <br>
              <br>

            <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
              <input type="image" name="submit" id="submit" src="Free-Camping/images2/SubmitCampsiteButton_1.png"/>
        </p>
</div>


   <div id="panel" style="position:absolute; left:14; top:1010px; width:760px; height:20px;">
      <input id="address2" type="textbox" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>


</div>
</div>
</div>
</body>
</html>

如果有人有什么建议？

最好的，达科

score 0 · Accepted Answer

你至少有两个问题：

您的地图变量是加载函数的本地变量，它在 HTML 点击处理函数（即地理编码器）运行的全局范围内不可用。

var map=null;

function load() {
// ...
map = new google.maps.Map(document.getElementById("map"), {
  center: latLng,
  zoom: 4,
  mapTypeControlOptions: {
  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
  } 
});

google.maps.GeocoderRequest没有“address2”属性，必须是“address”

function codeAddress() {
  var address2 = document.getElementById('address2').value;
  geocoder2.geocode( { 'address': address2}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
        var marker3 = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google-maps - Google Maps API - 一张地图内的两个地理编码服务

1 回答 1

Related

Reference