从 Bing 地图上的 Microsoft.Maps.WellKnownText [WKT] 填充多边形

Question

我正在尝试通过以下代码在 Bing 地图上填充多边形。但它根本不在地图上绘制多边形。请检查下面的代码，让我知道我错过了什么？

请注意我为安全目的设置的凭据 xxxx。

谢谢

<!DOCTYPE html>
<html>
<head>

<title>binaryOperationsHTML</title>

<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />

<script type='text/javascript'>
    var map;
    var polygon;
    function loadMapScenario() {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            /* No need to set credentials if already passed in URL */
            center: new Microsoft.Maps.Location(33.146190241986119,  -86.482209833117281),
            zoom: 7 });


        //Load the Well Known Text module.
        Microsoft.Maps.loadModule('Microsoft.Maps.WellKnownText', function  () {
            //Parse well known text string.
            polygon = Microsoft.Maps.WellKnownText.read('POLYGON((-122.358  47.653, -122.348 47.649, -122.348 47.658, -122.358 47.658, -122.358 47.653))');

            //Add parsed shape to the map.
            map.entities.push(polygon);

        });

    }


</script>
</head>
<body>
<div id='printoutPanel'></div>

<div id='myMap' style='width: 100vw; height: 100vh;'></div>

<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=xxxx&callback=loadMapScenario' async defer></script>
</body>
</html>

Answer 1

您的代码运行良好，确实向地图添加了一个多边形。我认为问题在于您将初始地图中心设置为距离多边形非常远的位置，因此您的多边形不在视野范围内，您必须 pan/zoom 才能找到它。尝试使用这个中心值：

center: new Microsoft.Maps.Location(47.65,  -122.4)

从 Bing 地图上的 Microsoft.Maps.WellKnownText [WKT] 填充多边形

Populate polygon from Microsoft.Maps.WellKnownText [ WKT ] on Bing map

polygon

bing

bing-maps

bing-api

wkt