这里的测地线多段线
Geodesic Polylines in Here
我试图在我的很多代码中从 Google 地图切换到此处。困扰我的一件事是需要测地线与“直线”
可在此处找到相关示例:http://www.2timothy42.org/Travel/?Mode=
还有另一个 Stack Overflow 问题,答案是 ,但 link 不再有效。
HERE Developer Support 发布的示例可以帮助您实现目标,但代码中包含不必要的额外内容,并且它还有一些相对的 JS 引用,一旦输入我的代码就无法使用.
这与我注意到 Google 地图 API 和 HERE API 之间的主要区别之一是 Google 地图使用一个 JS 调用,而 HERE有一些,如果它们没有正确包含会产生一些问题。
头部
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script src="https://tcs.ext.here.com/assets/geodesic-polyline-955f4bde9d216d0e89b88f4ba29c75fd1407f30f905380039e312976f3e30c88.js"></script>
BODY
<div id="map" style='width: 600px; height: 300px; border: 1px solid #000000;'></div>
<script type="text/javascript" charset="UTF-8" >
// Check whether the environment should use hi-res maps
var hidpi = ('devicePixelRatio' in window && devicePixelRatio > 1);
// check if the site was loaded via secure connection
var secure = (location.protocol === 'https:') ? true : false;
// Create a platform object to communicate with the HERE REST APIs
var platform = new H.service.Platform({
useCIT: true,
useHTTPS: secure,
app_id: 'API_APP_ID',
app_code: 'API_APP_CODE'
}),
maptypes = platform.createDefaultLayers(hidpi ? 512 : 256, hidpi ? 320 : null);
// Instantiate a map in the 'map' div, set the base map to normal
var map = new H.Map(document.getElementById('map'), maptypes.normal.map, {
center: {lat:32.00, lng:-110.00},
zoom: 1,
pixelRatio: hidpi ? 2 : 1
});
// Enable the map event system
var mapevents = new H.mapevents.MapEvents(map);
// Enable map interaction (pan, zoom, pinch-to-zoom)
var behavior = new H.mapevents.Behavior(mapevents);
// Enable the default UI
var ui = H.ui.UI.createDefault(map, maptypes);
window.addEventListener('resize', function() { map.getViewPort().resize(); });
var npoints = 100,
offset = 20;
// Tokyo -> san Francisco
add([35.68019,139.81194],[37.77712,-122.41964], {style: { strokeColor: "rgba(0,0,255,0.7)", lineWidth: 4}});
function add(s,e,options) {
var start_ll = new H.geo.Point(s[0],s[1]),
end_ll = new H.geo.Point(e[0],e[1]),
start_coord = {x: start_ll.lng, y:start_ll.lat},
end_coord = {x:end_ll.lng, y:end_ll.lat};
description = ''+s[0]+','+s[1]+'=>'+e[0]+','+e[1]+'',
gc0 = new arc.GreatCircle(start_coord,end_coord, {'name': 'line', 'color':'#ff7200','description':description}),
line0 = gc0.Arc(npoints,{offset:offset}),
strip = line0.strip();
map.addObject(new H.map.Polyline(strip, options));
}
</script>
我试图在我的很多代码中从 Google 地图切换到此处。困扰我的一件事是需要测地线与“直线”
可在此处找到相关示例:http://www.2timothy42.org/Travel/?Mode=
还有另一个 Stack Overflow 问题,答案是
HERE Developer Support 发布的示例可以帮助您实现目标,但代码中包含不必要的额外内容,并且它还有一些相对的 JS 引用,一旦输入我的代码就无法使用.
这与我注意到 Google 地图 API 和 HERE API 之间的主要区别之一是 Google 地图使用一个 JS 调用,而 HERE有一些,如果它们没有正确包含会产生一些问题。
头部
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script src="https://tcs.ext.here.com/assets/geodesic-polyline-955f4bde9d216d0e89b88f4ba29c75fd1407f30f905380039e312976f3e30c88.js"></script>
BODY
<div id="map" style='width: 600px; height: 300px; border: 1px solid #000000;'></div>
<script type="text/javascript" charset="UTF-8" >
// Check whether the environment should use hi-res maps
var hidpi = ('devicePixelRatio' in window && devicePixelRatio > 1);
// check if the site was loaded via secure connection
var secure = (location.protocol === 'https:') ? true : false;
// Create a platform object to communicate with the HERE REST APIs
var platform = new H.service.Platform({
useCIT: true,
useHTTPS: secure,
app_id: 'API_APP_ID',
app_code: 'API_APP_CODE'
}),
maptypes = platform.createDefaultLayers(hidpi ? 512 : 256, hidpi ? 320 : null);
// Instantiate a map in the 'map' div, set the base map to normal
var map = new H.Map(document.getElementById('map'), maptypes.normal.map, {
center: {lat:32.00, lng:-110.00},
zoom: 1,
pixelRatio: hidpi ? 2 : 1
});
// Enable the map event system
var mapevents = new H.mapevents.MapEvents(map);
// Enable map interaction (pan, zoom, pinch-to-zoom)
var behavior = new H.mapevents.Behavior(mapevents);
// Enable the default UI
var ui = H.ui.UI.createDefault(map, maptypes);
window.addEventListener('resize', function() { map.getViewPort().resize(); });
var npoints = 100,
offset = 20;
// Tokyo -> san Francisco
add([35.68019,139.81194],[37.77712,-122.41964], {style: { strokeColor: "rgba(0,0,255,0.7)", lineWidth: 4}});
function add(s,e,options) {
var start_ll = new H.geo.Point(s[0],s[1]),
end_ll = new H.geo.Point(e[0],e[1]),
start_coord = {x: start_ll.lng, y:start_ll.lat},
end_coord = {x:end_ll.lng, y:end_ll.lat};
description = ''+s[0]+','+s[1]+'=>'+e[0]+','+e[1]+'',
gc0 = new arc.GreatCircle(start_coord,end_coord, {'name': 'line', 'color':'#ff7200','description':description}),
line0 = gc0.Arc(npoints,{offset:offset}),
strip = line0.strip();
map.addObject(new H.map.Polyline(strip, options));
}
</script>