asp.net 在bingMap中添加图钉用于不同的邮政编码

m1m5dgzv 于 2023-05-23 发布在 .NET

关注(0)|答案(1)|浏览(104)

我想添加图钉到不同的邮政编码，我们在我的数组邮政编码下面。按照目前的代码，这是只显示邮政编码的边界，但我想添加与边界图钉。此外，我想要添加中心，使所有邮政编码图钉信息可以由用户查看。引用网址必应Map，我用过

<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>

asp.net

来源：https://stackoverflow.com/questions/69301199/add-pushpin-in-bing-map-for-different-zip-codes

1条答案

按热度按时间

dl5txlt91#

您可以使用空间数学模块的centroid函数计算多边形的中心：https://learn.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.Geometry.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>

赞(0）回复(0）举报 2023-05-23

我来回答

asp.net 在bingMap中添加图钉用于不同的邮政编码

1条答案

相关问题

热门标签

最新问答