2017-03-02 56 views
1

我需要使用地區代碼(ISO-3166-2)將來自使用座標(緯度/經度)記錄的地點與來自交互式地圖的訪客選擇進行匹配。從Google Maps API獲取ISO-3166-2代碼。可能嗎?

任何人都有這個好嗎?不太清楚如何去做和/或如果可能的話。

+0

添加的代碼修改讀取。澄清匹配什麼 –

回答

1

這是使用谷歌地圖獲取地區代碼(ISO-3166-2)的代碼。

Fiddle Link

的js

var geocoder; 
var map; 
var marker; 

codeAddress = function() { 
    geocoder = new google.maps.Geocoder(); 

    var address = document.getElementById('city_country').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map = new google.maps.Map(document.getElementById('mapCanvas'), { 
    zoom: 16, 
      streetViewControl: false, 
      mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
       mapTypeIds:[google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP] 
    }, 
    center: results[0].geometry.location, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
     map.setCenter(results[0].geometry.location); 
     marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location, 
      draggable: true, 
      title: 'My Title' 
     }); 
     updateMarkerPosition(results[0].geometry.location); 
     geocodePosition(results[0].geometry.location); 

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

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

    google.maps.event.addListener(marker, 'dragend', function() { 
    updateMarkerStatus('Drag ended'); 
    geocodePosition(marker.getPosition()); 
     map.panTo(marker.getPosition()); 
    }); 

    google.maps.event.addListener(map, 'click', function(e) { 
    updateMarkerPosition(e.latLng); 
    geocodePosition(marker.getPosition()); 
    marker.setPosition(e.latLng); 
    map.panTo(marker.getPosition()); 
    }); 

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

function geocodePosition(pos) { 
    geocoder.geocode({ 
    latLng: pos 
    }, function(responses) { 
    if (responses && responses.length > 0) { 
     //updateMarkerAddress(responses[0].formatted_address); 

    for (var i = 0; i < responses[0].address_components.length; i += 1) { 
    var addressObj = responses[0].address_components[i]; 
    for (var j = 0; j < addressObj.types.length; j += 1) { 
     if (addressObj.types[j] === 'country') { 
     updateMarkerAddress(addressObj.short_name); 
     } 
    } 
    } 
    } 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 updateMarkerAddress(str) { 
    document.getElementById('address').innerHTML = str; 
} 

HTML

<body> 
    <div id="panel"> 
     <input id="city_country" type="textbox" value="Dublin, Ireland"> 
     <input type="button" value="Geocode" onclick="codeAddress()"> 
    </div> 
    <div id="mapCanvas"></div> 
    <div id="infoPanel"> 
    <b>Marker status:</b> 
    <div id="markerStatus"><i>Click and drag the marker.</i></div> 
    <b>Current position:</b> 
    <div id="info"></div> 
    <b>Fetched ISO-3166-2 code from Google Maps API:</b> 
    <div id="address"></div> 
    </div> 
</body> 

免責聲明代碼Fiddle

+0

這很棒。 Thx ...對於那些正在尋找地區或城市的人,你可以用addressObj.types [j] ==='administrative_area_level_2'替代addressObj.types [j] ==='country') – FusionDesign

+0

)或者 或 addressObj.types [j] ==='administrative_area_level_1') – FusionDesign

相關問題