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

您不能拥有2个具有相同ID的不同HTML元素。

您可以将脚本基于类而不是选择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()); }); });

从两个Div调用GeoCode函数

1 个答案: