panTo()持续时间不起作用?

时间:2017-10-13 00:26:33

标签: google-maps leaflet duration pan angular-leaflet-directive

我只想使用以下方法平移到地图上的坐标:

<script src="https://cdn-webgl.wrld3d.com/wrldjs/dist/latest/wrld.js"></script>

但是持续时间选项被忽略 - 似乎默认持续时间是10秒并且无法更改。

为了它的价值,我使用了在Leaflet之上构建的Wrld(eegeo)3D地球插件,并且我通过以下方式访问它:

<!DOCTYPE HTML>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> 

    <script src="https://cdn-webgl.wrld3d.com/wrldjs/dist/latest/wrld.js"></script>
    <title></title>
  </head>
  <body onload="App.createGlobe()">
      <div id="earth_div"></div>
      <script src="js/app.js"></script>
  </body>
</html>

这是我的html文件:

App = {
  createGlobe: function() {
    var options = {zoom: 3, center: [40.3461, -94.8725]};
    var earth = new L.Wrld.map('earth_div', "insert_api_key_here", options);

    customMarker = L.Marker.extend({
          options: {
            markerID : ''
          }
    });

    $.getJSON('../causes.json', function(data) {   

          for (i = 0; i < data.length; i ++) { 
            var newMarkerOptions = {riseOnHover: true, markerID: data[i].id};
            var newMarker = new customMarker([], newMarkerOptions);
            newMarker.setLatLng(data[i].mapCoord);
            newMarker.addTo(earth); 
            markerClicked(newMarker);
          }

          function markerClicked(marker) {
            marker.on('click', function() {
              earth.panTo(data[marker.options.markerID].mapCoord, {animate: true, duration: 2.0});
            });
          };
    });
  }
};

这是我的app.js文件:

.block__element

1 个答案:

答案 0 :(得分:0)

尽管我不知道wrld.js API的确切运作方式,但似乎您需要的方法是map.setView(),如API example所示。

在行动here中查看。