Bings 地图 - 阅读 GeoJSON

Question

我正在使用 Bing 地图 v8 API，试图将我自己的 GeoJSON 加载到 Bing 地图上，如本例所示：https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#geoJsonReadObject+JS

我正在成功创建 JSON（我已经使用 Bing 地图拖放功能对其进行了测试，我的所有点都显示在地图上。https://bingmapsv8samples.azurewebsites.net/#GeoJson%20Drag%20and%20Drop。

我正在尝试让我的 GeoJSON 自动加载到地图上，但我收到 JSON 失败消息，我不确定为什么。（我对 GeoJSON/JSON 比较陌生。）

Javascript:

function loadMapScenario() {
            var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: 'KEY',
                center: new Microsoft.Maps.Location(32.560116, -117.057889),
                zoom: 5
            });
            Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
                var featureCollection = Microsoft.Maps.GeoJson.read(getGeoJson(), { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
                for (var i = 0; i < featureCollection.length; i++) {
                    map.entities.push(featureCollection[i]);
                }
            });

           function getGeoJson() {
            $(function (callback) {      
                var data;
                        $.ajax({
                            type: "POST",
                            url: "/TD/PatGeoJSON",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (response) {
                                alert("Hello: " + response.responseText.data)
                                data = response.RepsonseText;
                                callback(data)                                
                            },
                            failure: function (response) {
                                alert("Failure: " + response.responseText);
                            },
                            error: function (response) {
                                alert("Failure: " + response.responseText);
                            }                            
                        });
                    });
            }
        }

控制器：

        [HttpPost]
        public JsonResult PatGeoJSON(string parent)
        {
            JObject jsondata = JObject.FromObject(new
            {
                type = "FeatureCollection",
                features = from p in pList
                          select new
                          {
                              type = "Feature",
                              geometry = new Geometry
                              {
                                  type = "Point",
                                  coordinates = new double?[] { p.GeoLocation.Longitude, p.GeoLocation.Latitude }
                              },
                              properties = new Properties
                              {                                  
                                  MemberName = p.MemberName,
                                  /// etc...
                              }
                          }
            });        

            return Json(jsondata, JsonRequestBehavior.AllowGet);
        }

我的结果目前是一个带有 JSON 字符串的 "Failure" 警报。注意：如果我将我的 GeoJSON 硬编码为 getGEOJSON 函数的结果，我的所有点都会显示在地图上。我没有正确读取脚本中的 JsonResult 吗？

Answer 1

您的 getGeoJson 函数是异步的，因此它不会 return 任何东西，这个 bing 地图正在接收一个空值来解析它只是忽略它并且这没有错误。在加载 geojson 和响应时指定回调函数，然后读取其值。这是您的 JavaScript:

的更新版本

function loadMapScenario() {
    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'KEY',
        center: new Microsoft.Maps.Location(32.560116, -117.057889),
        zoom: 5
    });

    Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
        getGeoJson(function(data){
            var featureCollection = Microsoft.Maps.GeoJson.read(data, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
            for (var i = 0; i < featureCollection.length; i++) {
                map.entities.push(featureCollection[i]);
            }
        });
    });

   function getGeoJson(callback) {
        var data;
        $.ajax({
            type: "POST",
            url: "/TD/PatGeoJSON",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                alert("Hello: " + response.responseText.data)
                data = response.RepsonseText;
                callback(data)                                
            },
            failure: function (response) {
                alert("Failure: " + response.responseText);
            },
            error: function (response) {
                alert("Failure: " + response.responseText);
            }                            
        });
    }
}

Bings 地图 - 阅读 GeoJSON

Bings Maps - Read GeoJSON

c#

asp.net-mvc

bing-maps

geojson