地理编码Javascript问题

时间:2011-07-14 18:08:13

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

我想知道是否有人可以帮助我。

由于加载问题,我已将地图选项代码移动到我的HTML表单,而不是将其放在单独的Javascript文件中。

问题是我现在无法使用Geocode功能。我在下面添加了我的代码。我敢肯定它一定很简单,但我有点困惑。我只是想知道是否有人可以让我知道我哪里出错了。

非常感谢

function geocode() {

    // This is defining the global variables
    var geocoder, marker;

    // This is making the link with the 'Search For Location' HTML form
    var form = document.getElementById('searchforlocationform');

    // This is catching the forms submit event
    form.onsubmit = function() {

    // This is getting the Address from the HTML forms 'Address' text box
    var address = document.getElementById('inputaddress').value;

    // This is making the Geocoder call
    getCoordinates(address);

    // This is preventing the form from doing a page submit
    return false;
    }
    }
    function geocodePosition(pos) {
    geocoder.geocode({
    latLng: pos
    }, 

    function(responses) {
        if (responses && responses.length > 0) {
    updateMarkerAddress(responses[0].formatted_address);
    } else {
    updateMarkerAddress('Cannot determine address at this location.');
    }
    });
    }

    //New Code
    function updateMarkerStatus(str) {
    document.getElementById('markerStatus').innerHTML = str;
    }

    //Changed 'address' to 'returnedaddress'
    function updateMarkerAddress(str) {
    document.getElementById('returnedaddress').value= str;
    }

    // This creates the function that will return the coordinates for the address
    function getCoordinates(address) {

    // This checks to see if there is already a geocoded object. If not, it creates one
    if(!geocoder){geocoder = new google.maps.Geocoder();}

    // This is creating a GeocoderRequest object
    var geocoderRequest = {address: address}

    // This is making the Geocode request
    geocoder.geocode(geocoderRequest, function(results, status) {

     // Check if status is OK before proceeding
    if (status == google.maps.GeocoderStatus.OK) {

    // Center the map on the returned location
    map.setCenter(results[0].geometry.location);

    // Check to see if we've already got a Marker object
    if (!marker) {
    map.setZoom(16); 
    marker = new google.maps.Marker({
    map: map, draggable:true
    });
    }

    // Setting the position of the marker to the returned location
    marker.setPosition(results[0].geometry.location);

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

    //This fills out the 'Latitude' and 'Longitude' text boxes on the HTML form
    document.getElementById('osgb36lat').value= results[0].geometry.location.lat();
    document.getElementById('osgb36lon').value= results[0].geometry.location.lng();

    //This allows the marker to be draggable and tells the 'Latitude' and 'Longitude' text boxes on the HTML form to update with the new co-ordinates as the marker is dragged
    google.maps.event.addListener(marker,'dragend',     
    function() {    
    updateMarkerStatus;
    geocodePosition(marker.getPosition());
    document.getElementById('osgb36lat').value = marker.position.lat();         
    document.getElementById('osgb36lon').value = marker.position.lng();

    });

    // Update current position info.
    latLng = [marker.position.lat(), marker.position.lng()].join(', ');
    geocodePosition(marker.getPosition());



    var point = marker.getPosition();
    map.panTo(point);   
    }  
    } 
)
    }


<script type="text/javascript">
        (function() {
            window.onload = function(){
                var latlng = new google.maps.LatLng(54.312195845815246,-4.45948481875007);
                var options = {
                zoom: 6,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.TOP_RIGHT
                },
                navigationControl: true,
                navigationControlOptions: {
                style: google.maps.NavigationControlStyle.ZOOM_PAN,
                position: google.maps.ControlPosition.TOP_LEFT
                },
                scaleControl: true,
                scaleControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_LEFT
        } 
                }; 
                var map = new google.maps.Map(document.getElementById('map'), options);
            }
        })();

    </script>

1 个答案:

答案 0 :(得分:0)

您曾尝试使用updateMarkerAddress;调用updateMarkerAddress,并使用updateMarkerStatus;调用updateMarkerStatus,此处您缺少(/*some param*/)。 什么是装载问题?也许如果你展示你的HTML,那么有人也可以提供帮助。