如何在 Bing Map V8 中创建圆形折线或精确圆答案

【问题标题】：How can I create circle polyline or Accuracy Circle in Bing Map V8如何在 Bing Map V8 中创建圆形折线或精确圆
【发布时间】：2016-05-26 06:38:28
【问题描述】：

我已经在 Bing Map v7 中有 Accuracy Circle，但是当我使用 Bing Maps v8 时它无法工作。

如何在 Bing Map V8 中创建圆形折线或精确圆

【问题讨论】：

请向我们展示您到目前为止所做的尝试。 SO 在这里帮助您解决您在代码中遇到的特定问题，而不是像魔术一样为您提供所有代码......
geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map); geoLocationProvider.addAccuracyCircle(InitLocation, 5000, 5000, { polygonOptions: { fillColor: new Microsoft.Maps.Color(0, 0, 0,0), strokeColor: new Microsoft.Maps.Color(255,255,0,0), strokeThickness: 2、strokeDashArray: "30 5 5 5" } }); ----> 但这不适用于 Bing Maps V8
请编辑您的问题并添加代码...如果您在编辑帖子时单击“帮助”，您将看到可能有语法高亮

标签： javascript jquery dictionary bing-maps

【解决方案1】：

Bing Maps V8 SDK 不再有 GeoLocationProvider 类。这是在 6 年前发布的 v7 中添加的。当它发布时，没有浏览器具有任何地理定位功能。现在，所有主流浏览器都内置了 HTML5 Geolocation API，不再需要 v7 中的这个解决方法类。您可以在此处找到一篇关于如何在 V8 中使用 HTML5 地理定位 API 的文章：https://msdn.microsoft.com/en-us/library/mt712802.aspx

这些示例目前没有展示如何创建精确圆，因为空间数学库尚不可用，这使得这非常容易。在这个库中有一个名为 getRegularPolygon 的静态函数（文档：https://msdn.microsoft.com/en-us/library/mt712834.aspx）。它返回一个位置数组，这些位置在具有指定半径的位置周围形成一个正多边形。如果您生成一个具有 30 个或更多点的正多边形，它将看起来像一个圆。然而，在这个空间数学函数中存在一个错误，它意味着默认为米，而是使用 KM。我已经整理了一个代码示例，该示例在用户位置周围绘制了一个精确圆圈，并为当前的错误添加了一个小工作。即使在修复错误后，此解决方法仍将继续工作，因此您无需担心它会在将来发生故障。这是代码示例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript'
            src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
            async defer></script>
    <script type='text/javascript'>
    function GetMap() {
        var map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'Your Bing Maps Key'
        });

        //Load the spatial math module
        Microsoft.Maps.loadModule("Microsoft.Maps.SpatialMath", function () {
            //Request the user's location
            navigator.geolocation.getCurrentPosition(function (position) {
                var loc = new Microsoft.Maps.Location(
                    position.coords.latitude,
                    position.coords.longitude);

                //Create an accuracy circle
                var accuracyRadiusMeters = position.coords.accuracy;

                var path = Microsoft.Maps.SpatialMath.getRegularPolygon(loc, accuracyRadiusMeters/1000, 30,  Microsoft.Maps.SpatialMath.KM);
                var poly = new Microsoft.Maps.Polygon(path);
                map.entities.push(poly);           

                //Add a pushpin at the user's location.
                var pin = new Microsoft.Maps.Pushpin(loc);
                map.entities.push(pin);

                //Center the map on the user's location.
                map.setView({ center: loc, zoom: 17 });
            });
        });
    }
    </script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

【讨论】：