地理编码两个或多个地址

时间:2015-05-31 16:42:37

标签: javascript google-maps google-maps-api-3

我对地理编码地址感兴趣客户端https://developers.google.com/maps/articles/geocodestrat#client我在这个网站http://opengeocode.org/tutorials/googlemap/googlemaps_6.php#example_6找到了一段代码,我试图修改以实现我的目标。问题是我只得到第一个地址。怎么了?

    <!DOCTYPE html>
<html>
<head>
    <title>Google Map Template with Geocoded Address</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>    <!-- Google Maps API -->
    <script>
    var map;    // Google map object

    // Initialize and display a google map
    function Init()
    {
        // Create a Google coordinate object for where to initially center the map
        var latlng = new google.maps.LatLng( 38.8951, -77.0367 );   // Washington, DC

        // Map options for how to display the Google map
        var mapOptions = { zoom: 12, center: latlng  };

        // Show the Google map in the div with the attribute id 'map-canvas'.
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }

    // Update the Google map for the user's inputted address
    function UpdateMap( )
    {
        var geocoder = new google.maps.Geocoder();    // instantiate a geocoder object
        var destinationGeocoder = new google.maps.Geocoder(); 

        // Get the user's inputted address
        var address = document.getElementById( "address" ).value;
        var destination = document.getElementById( "destination" ).value;

        // Make asynchronous call to Google geocoding API
        geocoder.geocode( { 'address': address }, function(results, status) {
            var addr_type = results[0].types[0];    // type of address inputted that was geocoded
            if ( status == google.maps.GeocoderStatus.OK ) 
                ShowLocation( results[0].geometry.location, address, addr_type );
            else     
                alert("Geocode was not successful for the following reason: " + status);        
        });

        destinationGeocoder.geocode( { 'destination': destination }, function(results, status) {
            var addr_type = results[0].types[0];    // type of address inputted that was geocoded
            if ( status == google.maps.GeocoderStatus.OK ) 
                ShowLocation( results[0].geometry.location, destination, addr_type );
            else     
                alert("Geocode was not successful for the following reason: " + status);        
        });
    }

    // Show the location (address) on the map.
    function ShowLocation( latlng, add, addr_type )
    {
        // Center the map at the specified location
        map.setCenter( latlng );

        // Set the zoom level according to the address level of detail the user specified
        var zoom = 12;
        switch ( addr_type )
        {
        case "administrative_area_level_1"  : zoom = 6; break;      // user specified a state
        case "locality"                     : zoom = 10; break;     // user specified a city/town
        case "street_address"               : zoom = 15; break;     // user specified a street address
        }
        map.setZoom( zoom );

        // Place a Google Marker at the same location as the map center 
        // When you hover over the marker, it will display the title
        var marker = new google.maps.Marker( { 
            position: latlng,     
            map: map,      
            title: address
        });

        // Create an InfoWindow for the marker
        var contentString = "" + address + "";  // HTML text to display in the InfoWindow
        var infowindow = new google.maps.InfoWindow( { content: contentString } );

        // Set event to display the InfoWindow anchored to the marker when the marker is clicked.
        google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });
    }

    // Call the method 'Init()' to display the google map when the web page is displayed ( load event )
    google.maps.event.addDomListener( window, 'load', Init );

    </script>
    <style>
    /* style settings for Google map */
    #map-canvas
    {
        width : 500px;  /* map width */
        height: 500px;  /* map height */
    }
    </style>
</head>
<body> 
    <!-- Dislay Google map here -->
    <div id='map-canvas' ></div><br/>
    <div>
        <label for="address"> Address:</label>
        <input type="text" id="address"/>
        <label for="destination"> Destination:</label>
        <input type="text" id="destination"/>
        <button onclick="UpdateMap()">Locate</button>
    </div>
</body>
</html>

此外:如果我交换了两个地理编码功能,我没有得到任何结果,我无法解释原因

2 个答案:

答案 0 :(得分:1)

您在destinationGeocoder中的代码中存在错误,您必须使用- (void)messageComposeViewController:(MFMessageComposeViewController *)controller didFinishWithResult:(MessageComposeResult)result { [self dismissViewControllerAnimated:YES completion:NULL]; } 而非address地理编码属性始终为destination

address

答案 1 :(得分:1)

我发布的代码有两个javascript错误。

  • Uncaught InvalidValueError: unknown property destination
    这是不正确的:

    destinationGeocoder.geocode({
       'destination': destination
    },
    

应该是GeocoderRequest object

没有destination选项
    destinationGeocoder.geocode({
       'address': destination
    },

如果我解决这个问题,我会得到两个标记。

working fiddle

  • Uncaught InvalidValueError:setTitle:not a string

这是因为这是不正确的:

   var marker = new google.maps.Marker({
       position: latlng,
       map: map,
       title: address
   });

ShowLocation函数中没有变量地址,应为:

   var marker = new google.maps.Marker({
       position: latlng,
       map: map,
       title: add
   });

fixed fiddle