我正在尝试使用 Bing Maps API 绘制一个圆圈。它将地图居中放置在正确的位置，但圆圈和相关标签/描述没有显示。 这似乎不是 API 密钥问题。我对这件事很陌生，不知道这里的错误。我只是将代码存储在一个 .HTML 文件中，然后在我的 PC 上本地打开它进行测试。
<!DOCTYPE html>
<html>
<head>
<title>Bing Maps Example</title>
<meta charset="utf-8" />
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=MYKEY'></script>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
center: new Microsoft.Maps.Location(51.7353, 7.1350),
zoom: 12
});
// Create a circle with 1NM radius around the specified position
var circle = new Microsoft.Maps.Circle(
new Microsoft.Maps.Location(51.7369, 7.1350),1852, // 1 nautical mile = 1852 meters
{
strokeColor: 'red',
strokeThickness: 2,
fillColor: 'rgba(255,0,0,0.2)'
});
map.entities.push(circle);
// Create a clickable tag with the specified text
var infobox = new Microsoft.Maps.Infobox(
new Microsoft.Maps.Location(51.7369, 7.1350),
{
title: 'TEST_TITLE',
description: 'TEST_DESCRIPTION',
visible: true
});
infobox.setMap(map);
Microsoft.Maps.Events.addHandler(circle, 'click', function () {
infobox.setOptions({ visible: true });
});
}
</script>
</head>
<body onload='loadMapScenario();'>
<div id='myMap' style='width: 800px; height: 600px;'></div>
</body>
</html>
Microsoft.Maps.Circle要在 Bing 地图中创建一个圆，您实际上需要计算一个圆的估计点并将其传递到一个多边形中。这是有关如何执行此操作的代码片段：
//Load the Spatial Math module.
Microsoft.Maps.loadModule(['Microsoft.Maps.SpatialMath', 'Microsoft.Maps.Contour'], function () {
var center = new Microsoft.Maps.Location(51.7369, 7.1350);
var radius = 1852, // 1 nautical mile = 1852 meters
//Calculate the locations for a regular polygon that has 36 locations which will rssult in an approximate circle. Radius units defaults to meters.
var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36);
//Create a polygon from the points.
var circle = new Microsoft.Maps.Polygon(new Microsoft.Maps.Location(locs, {
strokeColor: 'red',
strokeThickness: 2,
fillColor: 'rgba(255,0,0,0.2)'
});
map.entities.push(circle);
//Add the rest of your code below.
});
还值得注意的是，必应地图支持多种距离单位，因此无需预先转换距离/半径。这是使用海里的代码的修改版本。
//Load the Spatial Math module.
Microsoft.Maps.loadModule(['Microsoft.Maps.SpatialMath', 'Microsoft.Maps.Contour'], function () {
var center = new Microsoft.Maps.Location(51.7369, 7.1350);
var radius = 1, // 1 nautical mile = 1852 meters
//Calculate the locations for a regular polygon that has 36 locations which will rssult in an approximate circle. You can set the distance units of the radius.
var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36, Microsoft.Maps.SpatialMath.DistanceUnits.NauticalMiles);
//Create a polygon from the points.
var circle = new Microsoft.Maps.Polygon(new Microsoft.Maps.Location(locs, {
strokeColor: 'red',
strokeThickness: 2,
fillColor: 'rgba(255,0,0,0.2)'
});
map.entities.push(circle);
//Add the rest of your code below.
});
您还可以在此处找到在 Bing 地图中创建/使用圆圈的不同方法的几个示例：https://samples.bingmapsportal.com/?search=circle