使用Bing API绘制圆形不起作用。

huangapple
go评论90阅读模式
英文:

Drawing circle using Bing API does not work

问题

我正在尝试使用Bing Maps API绘制一个圆。它将地图定位到正确的位置，但圆形和相关的标签/描述没有显示出来。
似乎不是API密钥的问题。我对这个东西一窍不通，不知道错误出在哪里。我只是将代码存储在一个.HTML文件中，然后在我的PC上本地打开它进行测试。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Bing Maps Example</title>
  5.     <meta charset="utf-8" />
  6.     <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=MYKEY'></script>
  7.     <script type='text/javascript'>
  8.         function loadMapScenario() {
  9.             var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
  10.                 center: new Microsoft.Maps.Location(51.7353, 7.1350),
  11.                 zoom: 12
  12.             });
  13.             
  14.             // 创建一个1海里半径的圆形，围绕指定位置
  15.             var circle = new Microsoft.Maps.Circle(
  16.                 new Microsoft.Maps.Location(51.7369, 7.1350), 1852, // 1海里 = 1852米
  17.                 { 
  18.                     strokeColor: 'red', 
  19.                     strokeThickness: 2, 
  20.                     fillColor: 'rgba(255,0,0,0.2)' 
  21.                 });
  22.             map.entities.push(circle);
  23.             
  24.             // 创建一个可点击的标签，带有指定的文本
  25.             var infobox = new Microsoft.Maps.Infobox(
  26.                 new Microsoft.Maps.Location(51.7369, 7.1350), 
  27.                 { 
  28.                     title: 'TEST_TITLE',
  29.                     description: 'TEST_DESCRIPTION',
  30.                     visible: true 
  31.                 });
  32.             infobox.setMap(map);
  33.             
  34.             Microsoft.Maps.Events.addHandler(circle, 'click', function () {
  35.                 infobox.setOptions({ visible: true });
  36.             });
  37.         }
  38.     </script>
  39. </head>
  40. <body onload='loadMapScenario();'>
  41.     <div id='myMap' style='width: 800px; height: 600px;'></div>
  42. </body>
  43. </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.

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;Bing Maps Example&lt;/title&gt;
  5. &lt;meta charset=&quot;utf-8&quot; /&gt;
  6. &lt;script type=&#39;text/javascript&#39; src=&#39;https://www.bing.com/api/maps/mapcontrol?key=MYKEY&#39;&gt;&lt;/script&gt;
  7. &lt;script type=&#39;text/javascript&#39;&gt;
  8. function loadMapScenario() {
  9. var map = new Microsoft.Maps.Map(document.getElementById(&#39;myMap&#39;), {
  10. center: new Microsoft.Maps.Location(51.7353, 7.1350),
  11. zoom: 12
  12. });
  13. // Create a circle with 1NM radius around the specified position
  14. var circle = new Microsoft.Maps.Circle(
  15. new Microsoft.Maps.Location(51.7369, 7.1350),1852, // 1 nautical mile = 1852 meters
  16. { 
  17. strokeColor: &#39;red&#39;, 
  18. strokeThickness: 2, 
  19. fillColor: &#39;rgba(255,0,0,0.2)&#39; 
  20. });
  21. map.entities.push(circle);
  22. // Create a clickable tag with the specified text
  23. var infobox = new Microsoft.Maps.Infobox(
  24. new Microsoft.Maps.Location(51.7369, 7.1350), 
  25. { 
  26. title: &#39;TEST_TITLE&#39;,
  27. description: &#39;TEST_DESCRIPTION&#39;,
  28. visible: true 
  29. });
  30. infobox.setMap(map);
  31. Microsoft.Maps.Events.addHandler(circle, &#39;click&#39;, function () {
  32. infobox.setOptions({ visible: true });
  33. });
  34. }
  35. &lt;/script&gt;
  36. &lt;/head&gt;
  37. &lt;body onload=&#39;loadMapScenario();&#39;&gt;
  38. &lt;div id=&#39;myMap&#39; style=&#39;width: 800px; height: 600px;&#39;&gt;&lt;/div&gt;
  39. &lt;/body&gt;
  40. &lt;/html&gt;

答案1

得分: 1

Microsoft.Maps.Circle不是Bing Maps API的文档功能。要在Bing Maps中创建一个圆，实际上需要计算圆的估算点，并将其传递给多边形。以下是如何执行此操作的代码段：

  1. //加载Spatial Math模块。
  2. Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
  3. 	var center = new Microsoft.Maps.Location(51.7369, 7.1350);
  4. 	var radius = 1852; // 1海里 = 1852米
  6. 	//计算具有36个位置的常规多边形的位置，这将产生一个近似的圆。半径单位默认为米。
  7. 	var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36);
  9. 	//从这些点创建多边形。
  10. 	var circle = new Microsoft.Maps.Polygon(locs, {
  11. 		strokeColor: 'red',
  12. 		strokeThickness: 2,
  13. 		fillColor: 'rgba(255,0,0,0.2)'
  14. 	});
  15. 	map.entities.push(circle);
  17. 	//在下面添加其余的代码。
  18. 	
  19. });

还值得注意的是，Bing Maps支持多种距离单位，因此无需预先转换您的距离/半径。以下是使用海里的修改后的代码版本。

  1. //加载Spatial Math模块。
  2. Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
  3. 	var center = new Microsoft.Maps.Location(51.7369, 7.1350);
  4. 	var radius = 1; // 1海里 = 1852米
  6. 	//计算具有36个位置的常规多边形的位置，这将产生一个近似的圆。您可以设置半径的距离单位。
  7. 	var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36, Microsoft.Maps.SpatialMath.DistanceUnits.NauticalMiles);
  9. 	//从这些点创建多边形。
  10. 	var circle = new Microsoft.Maps.Polygon(locs, {
  11. 		strokeColor: 'red',
  12. 		strokeThickness: 2,
  13. 		fillColor: 'rgba(255,0,0,0.2)'
  14. 	});
  15. 	map.entities.push(circle);
  17. 	//在下面添加其余的代码。
  18. 	
  19. });

您还可以在此处找到有关在Bing Maps中创建/使用圆的不同方法的示例：https://samples.bingmapsportal.com/?search=circle

更新

以下是您的代码的修改版本。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Bing Maps Example</title>
  5.     <meta charset="utf-8" />
  6.     <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=MYKEY'></script>
  7.     <script type='text/javascript'>
  8.         function loadMapScenario() {
  9.             var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
  10.                 center: new Microsoft.Maps.Location(51.7353, 7.1350),
  11.                 zoom: 12
  12.             });
  13. 			
  14. 			//加载Spatial Math模块。
  15. 			Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
  16. 				var center = new Microsoft.Maps.Location(51.7369, 7.1350);
  17. 				var radius = 1852; // 1海里 = 1852米
  19. 				//计算具有36个位置的常规多边形的位置，这将产生一个近似的圆。半径单位默认为米。
  20. 				var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36);
  21. 				
  22. 				//从这些点创建多边形。
  23. 				var circle = new Microsoft.Maps.Polygon(locs, { 
  24. 					strokeColor: 'red', 
  25. 					strokeThickness: 2, 
  26. 					fillColor: 'rgba(255,0,0,0.2)' 
  27. 				});
  28. 				map.entities.push(circle);
  30.             
  31. 				// 创建具有指定文本的可单击标签
  32. 				var infobox = new Microsoft.Maps.Infobox(
  33. 					new Microsoft.Maps.Location(51.7369, 7.1350), 
  34. 					{ 
  35. 						title: 'TEST_TITLE',
  36. 						description: 'TEST_DESCRIPTION',
  37. 						visible: true 
  38. 					});
  39. 				infobox.setMap(map);
  40. 				
  41. 				Microsoft.Maps.Events.addHandler(circle, 'click', function () {
  42. 					infobox.setOptions({ visible: true });
  43. 				});			
  44. 			});
  45.         }
  46.     </script>
  47. </head>
  48. <body onload='loadMapScenario();'>
  49.     <div id='myMap' style='width: 800px; height: 600px;'></div>
  50. </body>
  51. </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:

  1. //Load the Spatial Math module.
  2. Microsoft.Maps.loadModule(&#39;Microsoft.Maps.SpatialMath&#39;, function () {
  3. 	var center = new Microsoft.Maps.Location(51.7369, 7.1350);
  4. 	var radius = 1852; // 1 nautical mile = 1852 meters 
  6. 	//Calculate the locations for a regular polygon that has 36 locations which will rssult in an approximate circle. Radius units defaults to meters.
  7. 	var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36);
  8. 	
  9. 	//Create a polygon from the points.
  10. 	var circle = new Microsoft.Maps.Polygon(locs, { 
  11. 		strokeColor: &#39;red&#39;, 
  12. 		strokeThickness: 2, 
  13. 		fillColor: &#39;rgba(255,0,0,0.2)&#39; 
  14. 	});
  15. 	map.entities.push(circle);
  16. 	
  17. 	//Add the rest of your code below.
  18. 	
  19. });

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.

  1. //Load the Spatial Math module.
  2. Microsoft.Maps.loadModule(&#39;Microsoft.Maps.SpatialMath&#39;, function () {
  3. 	var center = new Microsoft.Maps.Location(51.7369, 7.1350);
  4. 	var radius = 1, // 1 nautical mile = 1852 meters
  6. 	//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.
  7. 	var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36, Microsoft.Maps.SpatialMath.DistanceUnits.NauticalMiles);
  8. 	
  9. 	//Create a polygon from the points.
  10. 	var circle = new Microsoft.Maps.Polygon(locs, { 
  11. 		strokeColor: &#39;red&#39;, 
  12. 		strokeThickness: 2, 
  13. 		fillColor: &#39;rgba(255,0,0,0.2)&#39; 
  14. 	});
  15. 	map.entities.push(circle);
  16. 	
  17. 	//Add the rest of your code below.
  18. 	
  19. });

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.

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4.     &lt;title&gt;Bing Maps Example&lt;/title&gt;
  5.     &lt;meta charset=&quot;utf-8&quot; /&gt;
  6.     &lt;script type=&#39;text/javascript&#39; src=&#39;https://www.bing.com/api/maps/mapcontrol?key=MYKEY&#39;&gt;&lt;/script&gt;
  7.     &lt;script type=&#39;text/javascript&#39;&gt;
  8.         function loadMapScenario() {
  9.             var map = new Microsoft.Maps.Map(document.getElementById(&#39;myMap&#39;), {
  10.                 center: new Microsoft.Maps.Location(51.7353, 7.1350),
  11.                 zoom: 12
  12.             });
  13. 			
  14. 			//Load the Spatial Math module.
  15. 			Microsoft.Maps.loadModule(&#39;Microsoft.Maps.SpatialMath&#39;, function () {
  16. 				var center = new Microsoft.Maps.Location(51.7369, 7.1350);
  17. 				var radius = 1852, // 1 nautical mile = 1852 meters 
  19. 				//Calculate the locations for a regular polygon that has 36 locations which will rssult in an approximate circle. Radius units defaults to meters.
  20. 				var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36);
  21. 				
  22. 				//Create a polygon from the points.
  23. 				var circle = new Microsoft.Maps.Polygon(locs, { 
  24. 					strokeColor: &#39;red&#39;, 
  25. 					strokeThickness: 2, 
  26. 					fillColor: &#39;rgba(255,0,0,0.2)&#39; 
  27. 				});
  28. 				map.entities.push(circle);
  30.             
  31. 				// Create a clickable tag with the specified text
  32. 				var infobox = new Microsoft.Maps.Infobox(
  33. 					new Microsoft.Maps.Location(51.7369, 7.1350), 
  34. 					{ 
  35. 						title: &#39;TEST_TITLE&#39;,
  36. 						description: &#39;TEST_DESCRIPTION&#39;,
  37. 						visible: true 
  38. 					});
  39. 				infobox.setMap(map);
  40. 				
  41. 				Microsoft.Maps.Events.addHandler(circle, &#39;click&#39;, function () {
  42. 					infobox.setOptions({ visible: true });
  43. 				});			
  44. 			});
  45.         }
  46.     &lt;/script&gt;
  47. &lt;/head&gt;
  48. &lt;body onload=&#39;loadMapScenario();&#39;&gt;
  49.     &lt;div id=&#39;myMap&#39; style=&#39;width: 800px; height: 600px;&#39;&gt;&lt;/div&gt;
  50. &lt;/body&gt;
  51. &lt;/html&gt;

huangapple
  • 本文由 发表于 2023年3月9日 21:41:25
  • 转载请务必保留本文链接：https://go.coder-hub.com/75685397.html
  • bing-api
  • bing-maps
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定