1. 홈
  2. 질의 응답
  3. Google지도 api 특정 지역의 데이터베이스에서 마커 검색

Google지도 api 특정 지역의 데이터베이스에서 마커 검색

2012-11-25 3 views
3

mysql 데이터베이스 및 표시 마커에서 데이터를로드하는 Google지도 API를 설정했습니다. 내가 직면 한 문제는 검색 위치 필드에 입력 한 모든 마커가 즉시 표시된다는 것입니다 .............. 검색된 영역과 마커 만 표시하려고합니다. 지역. 한 번에 모든 마커를 표시해서는 안되며 검색된 영역의 마커 만 표시해야합니다.Google지도 api 특정 지역의 데이터베이스에서 마커 검색

검색된 지역으로지도를 확대하고 싶습니다. 현재 하나의 마커 맵만 표시하면 확대 표시됩니다. 그러나 마커가 많으면 맵이 축소되어 모든 마커가 표시됩니다. 다음은 "http://funfeat.com/clients/gmap/gmap3.html"에서 작업중인지도입니다. 지금은 아주 아주 멀리 마커를 설정했으며지도는 여전히 축소되어 모든 마커를 보여줍니다.

gmap.php는 mysql 데이터베이스에서 xml 결과를 제공하는 파일입니다. 그리고 아래의 코드는 내가지도를 표시하기 위해 사용하고 무엇

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <title>Google Maps AJAX + mySQL/PHP Example</title> 
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    var map; 
    var markers = []; 
    var infoWindow; 
    var locationSelect; 

    function load() { 
     map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(40, -100), 
     zoom: 10, 
     mapTypeId: 'roadmap', 
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} 
     }); 
     infoWindow = new google.maps.InfoWindow(); 

     locationSelect = document.getElementById("locationSelect"); 
     locationSelect.onchange = function() { 
     var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 
     if (markerNum != "none"){ 
      google.maps.event.trigger(markers[markerNum], 'click'); 
     } 
     }; 
    } 

    function searchLocations() { 
    var address = document.getElementById("addressInput").value; 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({address: address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     searchLocationsNear(results[0].geometry.location); 
     } else { 
     alert(address + ' not found'); 
     } 
    }); 
    } 

    function clearLocations() { 
    infoWindow.close(); 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(null); 
    } 
    markers.length = 0; 

    locationSelect.innerHTML = ""; 
    var option = document.createElement("option"); 
    option.value = "none"; 
    option.innerHTML = "See all results:"; 
    locationSelect.appendChild(option); 
    } 

    function searchLocationsNear(center) { 
    clearLocations(); 

    var radius = document.getElementById('radiusSelect').value; 
    var searchUrl = 'gmap.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; 
    downloadUrl(searchUrl, function(data) { 
     var xml = parseXml(data); 
     var markerNodes = xml.documentElement.getElementsByTagName("marker"); 
     var bounds = new google.maps.LatLngBounds(); 
     for (var i = 0; i < markerNodes.length; i++) { 
     var name = markerNodes[i].getAttribute("name"); 
     var address = markerNodes[i].getAttribute("address"); 
     var distance = parseFloat(markerNodes[i].getAttribute("distance")); 
     var latlng = new google.maps.LatLng(
       parseFloat(markerNodes[i].getAttribute("lat")), 
       parseFloat(markerNodes[i].getAttribute("lng"))); 

     createOption(name, distance, i); 
     createMarker(latlng, name, address); 
     bounds.extend(latlng); 
     } 
     map.fitBounds(bounds); 
     locationSelect.style.visibility = "visible"; 
     locationSelect.onchange = function() { 
     var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 
     google.maps.event.trigger(markers[markerNum], 'click'); 
     }; 
     }); 
    } 

    function createMarker(latlng, name, address) { 
     var html = "<b>" + name + "</b> <br/>" + address; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: latlng 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
     }); 
     markers.push(marker); 
    } 

    function createOption(name, distance, num) { 
     var option = document.createElement("option"); 
     option.value = num; 
     option.innerHTML = name + "(" + distance.toFixed(1) + ")"; 
     locationSelect.appendChild(option); 
    } 

    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request.responseText, request.status); 
     } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
    } 

    function parseXml(str) { 
     if (window.ActiveXObject) { 
     var doc = new ActiveXObject('Microsoft.XMLDOM'); 
     doc.loadXML(str); 
     return doc; 
     } else if (window.DOMParser) { 
     return (new DOMParser).parseFromString(str, 'text/xml'); 
     } 
    } 

    function doNothing() {} 

    //]]> 
    </script> 
    </head> 

    <body style="margin:0px; padding:0px;" onLoad="load()"> 
    <div> 
    <input type="text" id="addressInput" size="10"/> 
    <select id="radiusSelect"> 
     <option value="25" selected>25mi</option> 
     <option value="100">100mi</option> 
     <option value="200">200mi</option> 
    </select> 

    <input type="button" onClick="searchLocations()" value="Search"/> 
    </div> 
    <div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div> 
    <div id="map" style="width: 100%; height: 80%"></div> 
    </body> 
</html>

출처

2012-11-25 AbsarAkram

답변

3

http://funfeat.com/clients/gmap/gmap.php?lat=47&lng=-122&radius=2은 유효한 XML을 생성하지만 쿼리는 .IT이 올 9있는 10 개 마커를 꺼내서 잘못된해야하지만, 10 확실히하지 않은 <marker name="Pakistan" address="Chowk Azam, Layyah" lat="31.008364" lng="71.224342" type="cITY"/>을 생산 좌표에서 2 마일 이내입니다. 쿼리가 데이터베이스의 마지막 마커를 선택해서는 안됩니다. mysql_로 기능의 사용이 권장되지 않습니다으로

다음 코드는 PDO는 레코드가 편집의

if ($stmt->rowCount()==0) { 
    $node = $dom->createElement("marker"); 
    $newnode = $parnode->appendChild($node); 
    $newnode->setAttribute("name", "No Records Found"); 
    $newnode->setAttribute("lat", $center_lat);//Sends marker to search location 
    $newnode->setAttribute("lng", $center_lng); 
    $newnode->setAttribute("distance", 0); 
      } 
    else {

끝을 찾을 수없는 경우 

//dependant on your setup $host= "WWW"; $username="XXX"; $password="YYY"; $database="ZZZ"; // Get parameters from URL $center_lat = $_GET["lat"]; $center_lng = $_GET["lng"]; $radius = $_GET["radius"]; // Start XML file, create parent node $dom = new DOMDocument("1.0"); $node = $dom->createElement("markers"); $parnode = $dom->appendChild($node); //Connect to database $dbh = new PDO("mysql:host=$host;dbname=$database", $username, $password); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); try { // Prepare statement $stmt = $dbh->prepare("SELECT name, lat, lng, (3959 * acos(cos(radians(?)) * cos(radians(lat)) * cos(radians(lng) - radians(?)) + sin(radians(?)) * sin(radians(lat)))) AS distance FROM gbstn HAVING distance < ? ORDER BY distance ASC LIMIT 0 , 20"); // Assign parameters $stmt->bindParam(1,$center_lat); $stmt->bindParam(2,$center_lng); $stmt->bindParam(3,$center_lat); $stmt->bindParam(4,$radius); //Execute query $stmt->setFetchMode(PDO::FETCH_ASSOC); $stmt->execute();

편집 추가 된 오류를 잡기 위해

을 사용할 수 있습니다 사용

// Iterate through the rows, adding XML nodes for each 
    while($row = $stmt->fetch()) { 
     $node = $dom->createElement("marker"); 
     $newnode = $parnode->appendChild($node); 
     $newnode->setAttribute("name", $row['name']); 
     $newnode->setAttribute("address", $row['address']); 
     $newnode->setAttribute("lat", $row['lat']); 
     $newnode->setAttribute("lng", $row['lng']); 
     $newnode->setAttribute("distance", $row['distance']); 
     } 
    } 
echo $dom->saveXML(); 

} 


catch(PDOException $e) { 
    echo "I'm sorry I'm afraid you can't do that.". $e->getMessage() ;// Remove or modify after testing 
    file_put_contents('PDOErrors.txt',date('[Y-m-d H:i:s]').", gmap.php, ". $e->getMessage()."\r\n", FILE_APPEND); 
} 
//Close the connection 
$dbh = null;

HAVING distance < '%s' 위의 쿼리 부분은 마지막 마커를 제거해야하는 부분입니다.

검색에 기록이없고 lat/lng 0,0으로 전송 된지도가 있으면 오류 캐치를 추가했습니다. ` 이 쿼리는 분명 URL에서 제공하는 매개 변수에 의존하지 않고, 여기에 내가 `$ 쿼리 =를 gmap.php되어있는 것입니다, 안녕하세요 My Implementation Here

출처

2012-11-25 13:46:05

+0

를 참조하십시오 "1 마커 SELECT * FROM". 또한'$ _GET'을 사용하여 URL로부터 정보를 얻는 gmap.php에는 아무것도 존재하지 않습니다. 검색된 용어가 자바 스크립트 등에서 확대/축소되어 검색된 영역과 마커 만 표시되도록 사용되는 것으로 생각했습니다. 그리고 데이터베이스에서 가져온 다른 마커를 건너 뜁니다. 제공 한 코드를 사용해보고 gmap.php에 $ _get (위 코드에서 제공 한 코드가 있음)로 정보를 보내도록 검색 양식을 만들어야합니까? – AbsarAkram

+1

잘못된 버전을 보내면 답변에서 코드가 변경되었습니다. 'var searchUrl ='gmap.php? lat = '+ center.lat() +'& lng = '+ center.lng() +'& radius = '+ radius;'GET을 사용하여 매개 변수를'gmap.php'로 보냅니다. . 내 코드'$ center_lat = $ _GET [ "lat"]; $ center_lng = $ _GET [ "lng"]; $ radius = $ _GET [ "radius"];'는 쿼리에서 사용됩니다. –

+0

링크가 더 이상 존재하지 않습니다. works –

관련 문제

 관련 문제