如何在Bing地图中添加半径圆?

时间:2012-02-16 17:10:45

标签: jquery ajax bing-maps

我在这里看到过: http://www.somebody4u.com/Profile/Live

但我找不到用api(ajax)做的方法。

2 个答案:

答案 0 :(得分:12)

Bing Maps V7不包含绘制圆圈方法。

通过绘制几个小段,圆圈必须“近似”。

var key = .....; // API access key

var MM = Microsoft.Maps;
var R = 6371; // earth's mean radius in km

var map = new Microsoft.Maps.Map(this.element[0], {credentials: key, disableKeyboardInput: true});

var radius = ...;      //radius of the circle
var latitude = ...;    //latitude of the circle center
var longitude = ...;   //longitude of the circle center

var backgroundColor = new Microsoft.Maps.Color(10, 100, 0, 0);
var borderColor = new Microsoft.Maps.Color(150, 200, 0, 0);

var lat = (latitude * Math.PI) / 180;     
var lon = (longitude * Math.PI) / 180;
var d = parseFloat(radius) / R;
var circlePoints = new Array();

for (x = 0; x <= 360; x += 5) {
    var p2 = new MM.Location(0, 0);
    brng = x * Math.PI / 180;
    p2.latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(brng));

    p2.longitude = ((lon + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat), 
                     Math.cos(d) - Math.sin(lat) * Math.sin(p2.latitude))) * 180) / Math.PI;
            p2.latitude = (p2.latitude * 180) / Math.PI;
            circlePoints.push(p2);
}

var polygon = new MM.Polygon(circlePoints, { fillColor: backgroundColor, strokeColor: borderColor, strokeThickness: 1 });

map.entities.push(polygon);

答案 1 :(得分:0)

更好的是,V8文档中现在有一个示例。 Geolocation Accuracy Circle Example

编辑:好的,上面的示例与此处其他答案的代码非常相似-并且该代码无法正常工作。我在文档页面上报告了它。我在Bing Maps开发中心获得了一个有效的示例。

Generate a regular polygon

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
    // Get locations of a regular hexagon, 5 miles from each vertex the map center
    var locations = Microsoft.Maps.SpatialMath.getRegularPolygon(map.getCenter(), 5, 6, Microsoft.Maps.SpatialMath.DistanceUnits.Miles);
    var polygon = new Microsoft.Maps.Polygon(locations, null);
    map.entities.push(polygon);
});

如果将6更改为36,则会得到一个圆圈。