我只想使用以下方法平移到地图上的坐标:
<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