如何解决使用Mapbox gl JS测量距离
Mapbox gl JS功能不起作用
大家好,
我使用Mapbox gl JS,并尝试通过库的lnglat对象测量距离 官方文档在这里:https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglat
我创建两个latlng对象,然后调用该函数以获取它们之间的距离。确实很简单,就像在文档中一样,但是却无法正常工作:浏览器显示tha lnglat不是函数。
在代码下面,如果有人有主意....谢谢:)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'/>
<title>brouillon</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<!-- {# BOOTSTRAT CSS#}-->
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
<!-- {# JQUERY #}-->
<script crossorigin="anonymous" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- {# AJJAX POPPER.JS #}-->
<script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- {# BOOTSTRAP JS #}-->
<script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- {# MAPBOX JS AND CSS #}-->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet'/>
<!--MAPBOX GEOCODER-->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet'
href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css'
type='text/css'/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1>distance test</h1>
</div>
</div>
<div class="row">
<div class="col-12">
<div id='map2' style='width: 800px; height: 600px;'></div>
</div>
</div>
<button class="btn btn-primary" id="id-action">action</button>
</div>
<script>
$(document).ready(function () {
// your token below
mapboxgl.accessToken = 'your token here';
let map = new mapboxgl.Map({
container: 'map2',// container id
style: 'mapbox://styles/mapbox/streets-v11',center: [-73.968565,40.779897],// New york
zoom: 9 // starting zoom
});
$("#id-action").click(function () {
let new_york = new mapboxgl.LngLat(-74.0060,40.7128);
let los_angeles = new mapboxgl.LngLat(-118.2437,34.0522);
let foo = new_york.distanceTo(los_angeles);
alert(foo);
})
});
</script>
</body>
</html>
解决方法
尽管changelog中未明确指定,但是distanceTo似乎仅在1.8.0中出现。尝试使用https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js或https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js(最新版本)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。