从两个div调用GeoCode函数

Question

我对此非常陌生，并试图运行GeoCode函数并从两个不同的div id调用它。它可以很好地与第一个div(我从美国下拉列表中调用它)，但不与第二个(加拿大国家下拉列表)。请帮我一下。

这是我的HTML:

<select class="address" value="Geocode" onchange="codeAddress(this)">
    <option>Select</option>
    <option value="Alabama,AL">Alabama</option>
    <option value="Alaska,AK">Alaska</option>
    <option value="Arizona,AZ">Arizona</option>
    <option value="Arkansas,AR">Arkansas</option>
    <option value="California,CA">California</option>
    <option value="Colorado,CO">Colorado</option>
    <option value="Connecticut,CT">Connecticut</option>
</select>
<select class="address" value="Geocode" onchange="codeAddress(this)">
    <option>Select</option>
    <option value="Alberta,AB">Alberta</option>
    <option value="British Columbia,BC">British Columbia</option>
    <option value="Manitoba,MB">Manitoba</option>
    <option value="New Brunswick,NB">New Brunswick</option>
    <option value="Newfoundland and Labrador,NL">Newfoundland and Labrador</option>
</select>

这是我的JavaScript:

var geocoder;
var map;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(42, -99);
    var mapOptions = {
        zoom: 5,
        center: latlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);
            var infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'Your Geo-Location',
                maxWidth: 200
            });
            var marker = new google.maps.Marker({
                position: pos,
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 5,
                },
                draggable: true,
                map: map
            });
            //Uncomment the function below if you want to change the center to the user's location
            map.setCenter(pos);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }
}
function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
    } else {
        var content = 'Error: Your browser doesn't support geolocation.';
    }
}
$('.address').change(function () {
codeAddress($(this).val());
 });
function codeAddress(address) {
    var address = document.getElementByClassName('address').value;
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            map.setZoom(7);
            //This is the variable thats let us display the icon on the selected location from the drop-down
            // var marker = new google.maps.Marker({
            //map: map,
            //position: results[0].geometry.location
            //});
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

不能有两个不同的HTML元素具有相同的id。

你可以用一个类来代替select id:

<select class="address" value="Geocode">
    <option>Select</option>
    <option value="Alabama,AL">Alabama</option>
    <option value="Alaska,AK">Alaska</option>
</select>
<select class="address" value="Geocode">
    <option>Select 2</option>
    <option value="Alberta,AB">Alberta</option>
    <option value="British Columbia,BC">British Columbia</option>
</select>

然后简单地在你的2个选择元素上添加一个变化事件监听器，类地址，并将值发送给你的codeAddress函数:

$('.address').change(function () {
    codeAddress($(this).val());
});
function codeAddress(address) {
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            map.setZoom(7);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

编辑:

将jQuery代码封装在$(document).ready()函数中。http://learn.jquery.com/using-jquery-core/document-ready/

$(function () {
    $('.address').change(function () {
        codeAddress($(this).val());
    });
});