简体   繁体   English

如何缩放bing贴图以显示一组纬度/经度?

[英]How to zoom a bing map to display a set of lat/long points?

I'm using the Bing Maps v7 control. 我正在使用Bing Maps v7控件。

I have an array of latitude/longitude points. 我有一系列纬度/经度点。 (of type Microsoft.Map.Location ) (类型为Microsoft.Map.Location

From that array, I can generate a rectangle, and a center of the rectangle, using LocationRect.fromLocations() 从该数组,我可以使用LocationRect.fromLocations()生成矩形和矩形的中心

When creating a map with the Map constructor, I can center the map using the center of that rectangle. 使用Map构造函数创建地图时,我可以使用该矩形的中心来居中地图。 It looks something like this: 它看起来像这样:

    var LLA = [
       new Microsoft.Maps.Location(43.386,-111.6123),
       new Microsoft.Maps.Location(43.4929, -112.0349),
       new Microsoft.Maps.Location(43.2609,-115.7811),
       ...
    ];
    var r = Microsoft.Maps.LocationRect.fromLocations(LLA);
    var mapOptions = {
        credentials : bingMapsKey,
        center      : r.center,
        mapTypeId   : Microsoft.Maps.MapTypeId.road,
        zoom        : 7
    },
    elt = document.getElementById('out2');
    var map = new Microsoft.Maps.Map(elt, mapOptions);

That works, and the map that gets created is centered around those points. 这是有效的,创建的地图以这些点为中心。 How can I set the zoom level of the Bing Map so that it displays the entire rectangle? 如何设置Bing Map的缩放级别,以便显示整个矩形?

See here: http://jsfiddle.net/MQ76x/ 见这里: http//jsfiddle.net/MQ76x/

Forget passing center / zoom , and pass the rectangle as bounds instead : 忘记传递center / zoom ,并将矩形作为bounds传递

var mapOptions = {
  credentials : bingMapsKey,
  bounds      : r, // <-- HERE
  mapTypeId   : Microsoft.Maps.MapTypeId.road
}

For anyone landing here as me and searching for a calculation for the zoom for BingMaps V8 depending on the center of a location (latitude, longitude) and the radius of the location in kilometers: 对于任何以我身份登陆并根据位置中心(纬度,经度)和以千米为单位的位置半径搜索BingMaps V8的缩放计算的人:

(Maybe you are also drawing a circle with the Microsoft.Maps.SpatialMath at the center of the location) (也许你也在该位置的中心绘制一个带有Microsoft.Maps.SpatialMath的圆圈)

function getZoomLevel(radiusInKilometer: number, latitude: number, heightOfMapInPixels: number, widthOfMapInPixels: number): number {
    const rangeInMeters = radiusInKilometer * 1000;
    // we take the lower value of the bounding rect of the map, so the circle will be best seen
    const limitBoundPixels = Math.min(heightOfMapInPixels, widthOfMapInPixels);
    const zoom = Math.floor(Math.log(156543.03392 * Math.cos(latitude * Math.PI / 180) / (rangeInMeters / limitBoundPixels)) / Math.log(2));

    return zoom;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 根据不同的纬度和经度设置谷歌地图的缩放级别 - Set zoom level of google map based on different lat and long 如何根据缩放级别在必应地图上显示一定数量的PushPins? - How to display certain amounts of PushPins on a Bing Map according to the zoom level? 如何在bing地图上为单个位置设置缩放级别 - How to set the zoom level for a single location on a bing map 如何让我的必应地图接受实时纬度和经度坐标并跟踪我的运动员在地图上的生活 - How to have my bing maps accept real time lat and long coordinates and track my athlete live along the map Bing地图。 如何通过lat和long获取地址? - Bing maps. How can I get address by lat and long? 使用Google电子表格中的经纬度长点的 - heat map using lat long points from google spread sheet 在地图中显示具有经纬度的点并弹出点的值 - display points with lat longs in map and popup the values for a point 如何使用 Leaflet.js 获得所需的 lat、long 值以仅显示 map 的所需部分? - How to get the desired value for lat,long to display only the required portion of the map with Leaflet.js? 根据纬度/经度放大高图 - Zoom in Highmaps based on Lat/Long 如何计算不同经纬度之间的距离并在 map 上显示动态反应原生 - How to calculate the distance between differents lat long and display on map dynamically react native
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM