Question

我正在努力引入第二次搜索来放置第一次搜索的标记。我已经编制了如下编码，用于一般搜索和标记位置，您可以看到并添加了一个额外的搜索框，但无法确定如何使该搜索框与第一个搜索框相同。

基本上我试图用一个提交按钮同时标记两个不同的位置。

任何人都可以帮助或指出我正确的方向

    <!-- Google Maps and Places API -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script type="text/javascript">    
        //declare namespace
        var up206b = {};

        //declare map
        var map;

        function trace(message) 
        {
            if (typeof console != 'undefined') 
            {
                console.log(message);
            }
        }


        up206b.initialize = function()
        {
            var latlng = new google.maps.LatLng(34.070264, -118.4440562);
            var myOptions = {
                zoom: 13,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }

     var geocoder = new google.maps.Geocoder();`

       up206b.geocode = function() 
{
    var address = $('#address').val();
    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);
        }
    });
}



up206b.geocode = function() 
{
    var address = $('#address').val();
    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);
        }
    });
}

var address = $('#address').val();

</script> 
</head>
<body onload="up206b.initialize()"> 



    <div style= "float:left">



    </div>



    <div style="width:380px; height: 100%; overflow:auto; float:right; padding-left:10px; padding-right:10px;"> 
        <h1>Map Search</h1>   


        <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;">
            <input type="text" id="address">
            <input type="text" id="">
            <input type="button" value="Submit" onClick="up206b.geocode()">
        </div>

    </div> 




    <div id="map_canvas" style="height:100%; margin-left:400px;"></div> 



</body>  
</html>

Answer 1

获取两个输入的值，对存在的值进行地理编码并将其添加到地图中。

<!DOCTYPE html>
<html>

  <head>

    <!-- Google Maps and Places API -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script type="text/javascript">    
      
      //declare namespace
      var up206b = {};

      //declare map
      var map;

      function trace(message) 
      {
        if (typeof console != 'undefined') 
        {
          console.log(message);
        }
      }

      up206b.initialize = function()
      {
        var latlng = new google.maps.LatLng(34.070264, -118.4440562);
        var myOptions = {
          zoom: 13,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }

      var geocoder = new google.maps.Geocoder();

      up206b.geocode = function() 
      {

        var addresses = [ $('#address').val(), $('#address2').val()];

        addresses.forEach(function(address){
          if(address){
          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);
            }
          });
          }
        });
      }

    </script> 
  </head>
  <body onload="up206b.initialize()"> 

    <div style="position: absolute; top: 0; right: 0; width:380px; height: 500px; overflow:auto; float:right; padding-left:10px; padding-right:10px;"> 
      <h1>Map Search</h1>   

      <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;">
        <input type="text" id="address">
        <input type="text" id="address2">
        <input type="button" value="Submit" onClick="up206b.geocode()">
      </div>

    </div> 

    <div id="map_canvas" style="height: 500px; width: 500px;"></div> 

  </body>  
</html>

谷歌地图api附加搜索框

1 个答案: