Bings地图-读取GeoJSON

Question

我正在使用Bing Maps v8 API，试图将我自己的GeoJSON加载到Bing Maps上，如本例所示:https://www.Bing.com/API/Maps/sdkrelease/mapcontrol/isdk#GeoJSONReadObject+js

我正在成功地创建我的JSON（我已经使用Bing Maps拖放特性测试了它，并且我的所有点都显示在Map.https://bingmapsv8samples.azurewebsites.net/#GeoJSON%20Drag%20和%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函数是异步的，所以它不返回任何东西，这个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);
            }                            
        });
    }
}