如何在地图上显示左上角,右下角的纬度和经度



我想使用一个边界框调用nokia.places.search.manager.findPlaces。我希望边界框对应于页面上显示的地图。我在http://developer.here.com/maps_js上找不到我期望的方法。

您需要的方法是Display.getViewBounds()。引用API参考:

此方法检索地图视图的外部边界框覆盖所有可见点的最小边界框。

下面是一个在位置搜索中使用boundingBox参数的例子(当然使用你自己的应用id和令牌)。如果增加显示的mapzoomLevel,则搜索将被限定在较小的区域内。最重要的部分在最下面。

<!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>

最新更新