在 bing 地图中为不同的邮政编码添加图钉答案

【问题标题】：Add pushpin in bing map for different zip codes在 bing 地图中为不同的邮政编码添加图钉
【发布时间】：2021-11-16 22:08:43
【问题描述】：

我想将图钉添加到下面我的数组邮政编码中的不同邮政编码。根据当前代码，这仅显示邮政编码的边界，但我想添加带边界的图钉。另外，我想添加中心，以便用户可以查看所有邮政编码图钉信息。 Reference URL Of bing Map, that i have used

 <script type='text/javascript'>
    function GetMap() {
         var  map = new Microsoft.Maps.Map(document.getElementById('divMap'), {
            credentials: bmKey,
            center: new Microsoft.Maps.Location(27.994402, -81.760254),        
            zoom: 7,
        });
      // Below zip code will be display on map
        var zipCodes = ['27006', '27007', '27009', '27011', '27012', '27013', '27014','27016'];
            var geoDataRequestOptions = {
                entityType: 'Postcode1',
                getAllPolygons: false
            };
            Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
                //Use the GeoData API manager to get the boundary
                Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(zipCodes, geoDataRequestOptions, map, function (data) {
                    if (data.results && data.results.length > 0) {
                        map.entities.push(data.results[0].Polygons);
                         
                        var pin = new Microsoft.Maps.Pushpin(data.results[0], {
                            title: 'test text',
                            subTitle: ' ',
                            text: '1'
                        });
                        
                        map.entities.push(pin);
                    }
                }, null, function errCallback(callbackState, networkStatus, statusMessage) {
                    console.log(callbackState);
                    console.log(networkStatus);
                    console.log(statusMessage);
                });
            });
    
    </script>
    




 <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                 <div id='printoutPanel'></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
    
     </form>
      <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=XXXXXXXXXXXX&callback=GetMap'
    </body>
    </html>

【问题讨论】：

标签： jquery asp.net bing-maps

【解决方案1】：

您可以使用空间数学模块的centroid 函数计算多边形的中心：https://docs.microsoft.com/en-us/bingmaps/v8-web-control/modules/spatial-math-module/geometry-calculations

以下内容可能会满足您的需求：

<script type='text/javascript'>
    function GetMap() {
         var  map = new Microsoft.Maps.Map(document.getElementById('divMap'), {
            credentials: bmKey,
            center: new Microsoft.Maps.Location(27.994402, -81.760254),        
            zoom: 7,
        });
      // Below zip code will be display on map
        var zipCodes = ['27006', '27007', '27009', '27011', '27012', '27013', '27014','27016'];
            var geoDataRequestOptions = {
                entityType: 'Postcode1',
                getAllPolygons: false
            };
            Microsoft.Maps.loadModule(['Microsoft.Maps.SpatialDataService', 'Microsoft.Maps.SpatialMath'], function () {
                //Use the GeoData API manager to get the boundary
                Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(zipCodes, geoDataRequestOptions, map, function (data) {
                    if (data.results && data.results.length > 0) {
                        map.entities.push(data.results[0].Polygons);

                        //Get the centroid of the polygons.
                        var centroid = Microsoft.Maps.SpatialMath.centroid(data.results[0].Polygons);
                        var pin = new Microsoft.Maps.Pushpin(centroid, {
                            title: 'test text',
                            subTitle: ' ',
                            text: '1'
                        });
                        
                        map.entities.push(pin);
                    }
                }, null, function errCallback(callbackState, networkStatus, statusMessage) {
                    console.log(callbackState);
                    console.log(networkStatus);
                    console.log(statusMessage);
                });
            });
    
    </script>
    




 <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                 <div id='printoutPanel'></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
    
     </form>
      <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=XXXXXXXXXXXX&callback=GetMap'
    </body>
    </html>

【讨论】：

Microsoft.Maps.SpatialMath.centroid(data.results[0].Polygons);根据文件，这接受纬度而不是邮政编码