代码之家 › 专栏 › 技术社区 › John Hughes

Bing地图包含定位功能

bing-maps

John Hughes · 技术社区 · 7 年前

我有一个同时使用Bing和谷歌地图的网站。每个功能都有Bing和Google版本。我复制谷歌有困难。地图。几何学聚。Bing地图中的containsLocation函数。有这样的事吗?

基本上,我构建了一个多边形,并希望确定图钉是否位于地图上的多边形内。

2 回复 | 直到 7 年前

rbrundritt 7 年前

Bing Maps V8有一个空间数学模块,可以使用intersects函数轻松完成此计算:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    </head>
    <body>
        <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        <script type='text/javascript'>
            function load() {
                var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                    credentials: 'YOUR BING MAPS KEY'
                });

                //Create a polygon and location for testing.    
                var center = map.getCenter();
                var polygon = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(center.latitude - 0.05, center.longitude - 0.05),
                    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude - 0.05),
                    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude + 0.05)], { fillColor: 'yellow', strokeColor: 'orange',
                    strokeThickness: 5, strokeDashArray: [1, 2, 5, 10] });
                map.entities.push(polygon);

                var location = new Microsoft.Maps.Location(center.latitude, center.longitude);

                //Load the Spatial Math module
                Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
                    //Check to see if the shapes intersect.
                    var intersects = Microsoft.Maps.SpatialMath.Geometry.intersects(location, polygon);

                    if(intersects){
                        alert("The location is inside in the polygon");        
                    } else {
                    alert("The location is NOT inside in the polygon");        
                                    }
                });     
            }
        </script>
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=load' async defer></script>
    </body>
</html>

Nicolas Boonaert 7 年前

您可以使用Bing Maps AJAX控件的可扩展性来添加自己的方法。您可以将该扩展方法放在Microsoft上。地图。位置类。

Microsoft.Maps.Location.prototype.IsInPolygon=function(polygon)
                {           
                    var isInside = false;
                    var j = 0;
                    var x = this.longitude;
                    var y = this.latitude;
                    var paths = polygon.getLocations();

                    for (var i = 0; i < paths.length ; i++) {
                        j++;
                        if (j == paths.length) { j = 0; }
                        if (((paths[i].latitude < y) && (paths[j].latitude >= y)) || ((paths[j].latitude < y) && (paths[i].latitude >= y))) {
                            if (paths[i].longitude + (y - paths[i].latitude) / (paths[j].latitude - paths[i].latitude) * (paths[j].longitude - paths[i].longitude) < x) {
                                isInside = !isInside
                            }
                        }
                    }           

                    return isInside;
                };

以下是Bing Maps V8的工作示例:

<!DOCTYPE html>
<html>
    <head>
        <title>Bing Maps - V8 - Polygon test</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    </head>
    <body>
        <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        <script type='text/javascript'>
            function load() {
                Microsoft.Maps.Location.prototype.IsInPolygon=function(polygon)
                {           
                    var isInside = false;
                    var j = 0;
                    var x = this.longitude;
                    var y = this.latitude;
                    var paths = polygon.getLocations();

                    for (var i = 0; i < paths.length ; i++) {
                        j++;
                        if (j == paths.length) { j = 0; }
                        if (((paths[i].latitude < y) && (paths[j].latitude >= y)) || ((paths[j].latitude < y) && (paths[i].latitude >= y))) {
                            if (paths[i].longitude + (y - paths[i].latitude) / (paths[j].latitude - paths[i].latitude) * (paths[j].longitude - paths[i].longitude) < x) {
                                isInside = !isInside
                            }
                        }
                    }           

                    return isInside;
                };

                var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                    credentials: 'YOUR KEY'
                });
                var center = map.getCenter();
                var polygon = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(center.latitude - 0.05, center.longitude - 0.05),
                    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude - 0.05),
                    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude + 0.05)], { fillColor: 'yellow', strokeColor: 'orange',
                    strokeThickness: 5, strokeDashArray: [1, 2, 5, 10] });
                map.entities.push(polygon);

                var location = new Microsoft.Maps.Location(center.latitude, center.longitude);
                alert("The location is inside in the polygon : " + location.IsInPolygon(polygon));                
            }



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