Google지도 및 지리

은 내가 지오 코딩을 사용하는 검색 기능을 시도하고 있습니다 ..하지만 약간의 문제를 데 .. 아주 재미있는, 어제 구글지도 API와 주변Google지도 및 지리

을 연주하기 시작했다. 어떤 이유로지도를 가져온 검색 결과 영역으로 이동하지 않습니다. http://teknologix.net/test.html

내가지도 변수가 initialize() 함수로 정의되고 함께 할 수있는 뭔가가 생각 : 나는 좋은 그들을 표시되는 alert(); ..

라이브 데모를 추가,이 좌표가 잘 검색 알고있다. 그래도 100 % 확신 할 수는 없습니다.

<!DOCTYPE html> 

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyB4iGeXYKfqv65-8c9UbR1qPavZb6VFXCU&sensor=false"></script> 
<script type="text/javascript"> 
var geocoder = new google.maps.Geocoder(); 
var map; 

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

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

function initialize() { 
    var latLng = new google.maps.LatLng(-33.90616588876475, 151.15102333450318); 
    var map = new google.maps.Map(document.getElementById('mapCanvas'), { 
    zoom: 15, 
    center: latLng, 
    disableDefaultUI: true, 
    zoomControl: true, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var marker = new google.maps.Marker({ 
    position: latLng, 
    title: 'Point A', 
    map: map, 
    draggable: true 
    }); 

    // Update current position info. 
    updateMarkerPosition(latLng); 
    geocodePosition(latLng); 

    // 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, 'bounds_changed', function() { 
    marker.setPosition(map.getCenter()); 
    updateMarkerPosition(marker.getPosition()); 
    }); 
} 

function codeAddress() { 
    var address2 = document.getElementById('target').value; 
    geocoder.geocode({ 'address': address2}, function(results) { 
      alert(results[0].geometry.location); 
      map.setCenter(results[0].geometry.location); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
    <style> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #mapCanvas { 
    height: 85%; 
    width: 100%; 
    position: relative; 
    } 
    #infoPanel div { 
    background: white; 
    top: 0px; 
    position: relative; 
    height: 20px; 
    width: 500px; 
    } 
    </style> 

    <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>Closest matching address:</b> 
    <div id="address"></div> 
    </div> 
    <div> 
     <input id="target" type="textbox" value="Sydney, NSW"> 
     <input type="button" value="Geocode" onclick="codeAddress();"> 
     <input type="button" value="Test" onclick="test();"> 
    </div> 
</body> 
</html>

도움이 되겠습니다. 읽어 주셔서 감사합니다!

출처

2012-09-07 Pauly Galea

게시 한 링크 (http://teknologix.net/test.html)가 유효하지 않습니다 (404 페이지 표시). – GregL

가장 먼저해야 할 일은 initialize() 함수를 변경하여 해당 함수 범위 내의 변수 map을 다시 선언하지 않는 것입니다. 즉 var map = ...을 map = ...으로 변경하면 map 변수의 값이 전역으로 설정됩니다.

출처

2012-10-02 02:11:28 GregL

Google지도 및 지리

답변

관련 문제