英文:
Drawing circle using Bing API does not work
问题
我正在尝试使用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
});
// 创建一个1海里半径的圆形，围绕指定位置
var circle = new Microsoft.Maps.Circle(
new Microsoft.Maps.Location(51.7369, 7.1350), 1852, // 1海里 = 1852米
{
strokeColor: 'red',
strokeThickness: 2,
fillColor: 'rgba(255,0,0,0.2)'
});
map.entities.push(circle);
// 创建一个可点击的标签，带有指定的文本
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>
英文:
I am trying to draw a circle using the Bing Maps API. It centers the map onto the correct location but the circle and the associated tag/description do not show up.
It does not seem to be an API key issue. I am bloody new to this thing and don't know the error here. I simply store the code in a .HTML file and open it locally on my PC to test.
<!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>
答案1
得分: 1
Microsoft.Maps.Circle不是Bing Maps API的文档功能。要在Bing Maps中创建一个圆，实际上需要计算圆的估算点，并将其传递给多边形。以下是如何执行此操作的代码段：
//加载Spatial Math模块。
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
var center = new Microsoft.Maps.Location(51.7369, 7.1350);
var radius = 1852; // 1海里 = 1852米
//计算具有36个位置的常规多边形的位置，这将产生一个近似的圆。半径单位默认为米。
var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36);
//从这些点创建多边形。
var circle = new Microsoft.Maps.Polygon(locs, {
strokeColor: 'red',
strokeThickness: 2,
fillColor: 'rgba(255,0,0,0.2)'
});
map.entities.push(circle);
//在下面添加其余的代码。
});
还值得注意的是，Bing Maps支持多种距离单位，因此无需预先转换您的距离/半径。以下是使用海里的修改后的代码版本。
//加载Spatial Math模块。
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
var center = new Microsoft.Maps.Location(51.7369, 7.1350);
var radius = 1; // 1海里 = 1852米
//计算具有36个位置的常规多边形的位置，这将产生一个近似的圆。您可以设置半径的距离单位。
var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36, Microsoft.Maps.SpatialMath.DistanceUnits.NauticalMiles);
//从这些点创建多边形。
var circle = new Microsoft.Maps.Polygon(locs, {
strokeColor: 'red',
strokeThickness: 2,
fillColor: 'rgba(255,0,0,0.2)'
});
map.entities.push(circle);
//在下面添加其余的代码。
});
您还可以在此处找到有关在Bing Maps中创建/使用圆的不同方法的示例：https://samples.bingmapsportal.com/?search=circle
更新
以下是您的代码的修改版本。
<!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
});
//加载Spatial Math模块。
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
var center = new Microsoft.Maps.Location(51.7369, 7.1350);
var radius = 1852; // 1海里 = 1852米
//计算具有36个位置的常规多边形的位置，这将产生一个近似的圆。半径单位默认为米。
var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36);
//从这些点创建多边形。
var circle = new Microsoft.Maps.Polygon(locs, {
strokeColor: 'red',
strokeThickness: 2,
fillColor: 'rgba(255,0,0,0.2)'
});
map.entities.push(circle);
// 创建具有指定文本的可单击标签
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 is not a documented feature of the Bing Maps API (https://learn.microsoft.com/en-us/bingmaps/v8-web-control/)
To create a circle in Bing Maps you actually calculate the estimated points for a circle and pass it into a polygon. Here is a code snippet on how to do this:
//Load the Spatial Math module.
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', 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(locs, {
strokeColor: 'red',
strokeThickness: 2,
fillColor: 'rgba(255,0,0,0.2)'
});
map.entities.push(circle);
//Add the rest of your code below.
});
It's also worth noting that Bing Maps supports multiple distance units, so no need to pre-convert your distance/radius. Here is a modified version of the code using nautical miles.
//Load the Spatial Math module.
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', 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(locs, {
strokeColor: 'red',
strokeThickness: 2,
fillColor: 'rgba(255,0,0,0.2)'
});
map.entities.push(circle);
//Add the rest of your code below.
});
You can also find several samples of different ways to create/use circles in Bing Maps here: https://samples.bingmapsportal.com/?search=circle
Update
Here is a modified version of your code.
<!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
});
//Load the Spatial Math module.
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', 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(locs, {
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论