以2GIS作为提供者的传单,添加Geojson文件错误

时间:2019-01-31 08:22:37

标签: javascript leaflet

我试图将2GIS用作网络地图界面的图块和地图提供者以及传单。由于输出工作完美。但是我尝试打开GeoJson,但无法正常工作。 我尝试对GeoJson使用传单命令,并为2GIS切片设置背景。 我有一个错误:

  

index.html:60未捕获的TypeError:DG.geoJson不是函数       在Object.success(index.html:60)       在我(jquery.min.js:2)       在Object.fireWith [as resolveWith](jquery.min.js:2)       在z(jquery.min.js:4)       在XMLHttpRequest。 (jquery.min.js:4)

<!DOCTYPE html>
<html lang="en">

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>


        <title>GoldMan App</title>

        <style>
            #map {
                width: 960px;
                height:550px;
            }

        </style>

    </head>

    <body>
        <div id="map"></div>
        <script type="text/javascript">
            //var map;

            DG.then(function () {
                var map = DG.map('map', {
                    center: [35.126411,33.429859],
                    zoom: 9
                });

                DG.marker([35.18,33.35]).addTo(map).bindPopup('Cyprus/Nicosia');
            });


            // loading GeoJSON file - Here my html and PicnicSites.geojson file resides in same folder
            $.getJSON("PicnicSites.geojson",function(data){
                // L.geoJson function is used to parse geojson file and load on to map
                DG.geoJson(data).addTo(map);
            });

        </script>

    </body>

</html>

enter image description here

1 个答案:

答案 0 :(得分:1)

发生此错误是因为调用2GIS之后尚未加载DG.geoJson库。根据{{​​3}},需要异步调用Maps API方法,如下所示:

DG.then(function() {
    var map = DG.map("map", {
      center: [35.126411, 33.429859],
      zoom: 9
    });

    DG.marker([35.18, 33.35])
      .addTo(map)
      .bindPopup("Cyprus/Nicosia");

    $.getJSON("PicnicSites.geojson", function(data) {
      DG.geoJson(data).addTo(map);
    });
  });

演示

  DG.then(function() {
        var map = DG.map("map", {
          center: [35.126411, 33.429859],
          zoom: 9
        });

        DG.marker([35.18, 33.35])
          .addTo(map)
          .bindPopup("Cyprus/Nicosia");

         $.getJSON("https://gist.githubusercontent.com/vgrem/734ffa9f457d42ff8ff2a127530135c2/raw/91352a9b9fc7d7302f643636145ad37817b96992/data,json", function(data) {
         
          DG.geoJson(data).addTo(map);
        });
      });
   #map {
        width: 960px;
        height: 550px;
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
    />
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<div id="map"></div>