使用不同的div ID调用相同的函数 [英] Calling same function using different div ids

问题描述

尝试运行GeoCode功能并从两个不同的DIV ID中调用它。它适用于第一个div（我从美国国家下拉列表中调用它），但没有第二个（加拿大国家下拉列表）。



Javascript代码如下所示：

Trying to run the GeoCode function and call it from two different DIV IDs. It works fine with the first div (Where I'm calling it from US States drop-down list) but not with the second (Canada States drop-down list).

Javascript Code looks like this:

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.';
    }
}

function codeAddress() {
    var address = document.getElementById('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);

HTML如下所示：

HTML looks like this:

<select id="address" value="Geocode" onchange="codeAddress()">
    <option>Select</option>
    <option value="Alabama,AL">Alabama</option>
    <option value="Alaska,AK">Alaska</option>
    <option value="Arizona,AZ">Arizona</option>
    
</select>
<select id="address" value="Geocode" onchange="codeAddress()">
    <option>Select</option>
    <option value="Alberta,AB">Alberta</option>
    
</select>

推荐答案

我也是初学者，但我希望能提供帮助，你可以使用类似的东西：

ASP代码：

I am also a beginner, but I hope to help, You can use something like:
ASP Code:

<select id="address1" value="Geocode"  onchange="codeAddress('address1')">
    <option>Select</option>
    <option value="Alabama,AL">Alabama</option>
    <option value="Alaska,AK">Alaska</option>
    <option value="Arizona,AZ">Arizona</option>
    
</select>
<select id="address2" value="Geocode" onchange="codeAddress('address2')">
    <option>Select</option>
    <option value="Alberta,AB">Alberta</option>
    
</select></select>

Javascript代码：

Javascript Code:

function codeAddress(element) {
    var address = document.getElementById(element).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);
        }
    });
}

这篇关于使用不同的div ID调用相同的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！