1. 홈
  2. 질의 응답
  3. 왼쪽 위, 오른쪽 아래 위도 및 경도를지도에 표시하려면 어떻게해야합니까?

왼쪽 위, 오른쪽 아래 위도 및 경도를지도에 표시하려면 어떻게해야합니까?

2013-06-11 3 views

답변

3

뒤에 오는 방법은 Display.getViewBounds()입니다. API를 참조 인용합니다 :

이 방법은 맵보기의 외부 경계 상자 (모든 보이는 점을 덮고있는 작은 경계 상자)를 검색합니다.

다음은 장소 검색에서 boundingBox 매개 변수를 사용하는 예입니다 (물론 app id and token을 사용하십시오). map 중 zoomLevel이 증가하면 검색 범위가 더 좁아집니다. 중요한 비트가 바닥에 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
     <title>HERE Maps API Example: Search by bounding box</title> 
     <meta name="description" content="Search by category"/> 
     <meta name="keywords" content="search, services, places, category"/> 
     <!-- For scaling content for mobile devices, setting the viewport to the width of the device--> 
     <meta name=viewport content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
     <!-- By default we add ?with=all to load every package available, it's better to change this parameter to your use case. Options ?with=maps|positioning|places|placesdata|directions|datarendering|all --> 
     <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all"></script> 
     <!-- JavaScript for example container (NoteContainer & Logger) --> 
     <style type="text/css"> 
      html { 
       overflow:hidden; 
      } 

      body { 
       margin: 0; 
       padding: 0; 
       overflow: hidden; 
       width: 100%; 
       height: 100%; 
       position: absolute; 
      } 

      #mapContainer { 
       width: 80%; 
       height: 80%; 
       left: 0; 
       top: 0; 
       position: absolute; 
      } 
      #progress { 
       width: 80%; 
       height: 10%; 
       left: 0; 
       top: 80%; 
       position: absolute; 
      } 
      #buttons { 
       width: 80%; 
       height: 10%; 
       left: 0; 
       top: 90%; 
       position: absolute; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="mapContainer"></div> 
     <div id="progress"></div> 

     <script type="text/javascript" id="exampleJsSource"> 

nokia.Settings.set("appId", "YOUR APP ID"); 
nokia.Settings.set("authenticationToken", "YOUR TOKEN"); 


// Get the DOM node to which we will append the map 
var mapContainer = document.getElementById("mapContainer"); 
// Create a map inside the map container DOM node 
var map = new nokia.maps.map.Display(mapContainer, { 
    // Initial center and zoom level of the map 
    center: [52.51, 13.4], 
    zoomLevel: 15, 
    components: [  
     new nokia.maps.map.component.Behavior() 
    ] 
}); 

var searchManager = nokia.places.search.manager, 
    resultSet; 




// Function for receiving search results from places search and process them 
var processResults = function (data, requestStatus, requestId) { 
    var i, len, locations, marker; 
    if (requestStatus == "OK") { 
     // The function findPlaces() and reverseGeoCode() of return results in slightly different formats 
     locations = data.results ? data.results.items : [data.location]; 
     // We check that at least one location has been found 
     if (locations.length > 0) { 
      // Remove results from previous search from the map 
      if (resultSet) map.objects.remove(resultSet); 
      // Convert all found locations into a set of markers 
      resultSet = new nokia.maps.map.Container(); 
      for (i = 0, len = locations.length; i < len; i++) { 
       marker = new nokia.maps.map.StandardMarker(locations[i].position, { text: i+1 }); 
       resultSet.objects.add(marker); 
      } 
      // Next we add the marker(s) to the map's object collection so they will be rendered onto the map 
      map.objects.add(resultSet); 
      // We zoom the map to a view that encapsulates all the markers into map's viewport 
      //map.zoomTo(resultSet.getBoundingBox(), true); 

     } else { 
      //alert("Your search produced no results!"); 
     } 
     searching = false; 
    } else { 
     alert("The search request failed"); 
     searching = false; 
    } 
}; 



// Binding of DOM elements to several variables so we can install event handlers. 
var progressUiElt = document.getElementById("progress"); 


var searching = false; 
search = function(boundingBox){ 
// Make a place search request 
var category = "eat-drink" 
progressUiElt.innerHTML = "Looking for places in the '" + category + "' category...'"; 
searchManager.findPlacesByCategory({ 
    category: category, 
    onComplete: processResults, 
    boundingBox: boundingBox, 
    limit: 50, 
}); 
} 


search(map.getViewBounds()); 



     </script> 
    </body> 
</html>

출처

2013-06-12 07:51:01

관련 문제

 관련 문제