Google Maps Javascript API V3中的旋转标记
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google Maps Javascript API V3中的旋转标记相关的知识,希望对你有一定的参考价值。
我没有做很多编码,但是我试着编写一些我认为会通过phonegap / cordova运行的简单代码。现在我想要它做的就是找到我,当我移动/行走/驾驶时,将标记保持在我的位置,并沿着我用标准三角形SVG Google标记行进的方向旋转。
我真的很难弄清楚旋转/方位/航向,因为我没有最终目的地或多边形线。现在我把它定位好了,把标记放在地图上,更新正常并将标记保持在中心。当然,我会为此添加更多内容,但这是我遇到麻烦的部分。我在旋转部分的代码中放了一个*** //我试图修复我认为可能有效的代码。我可能会把它变成一个名为heading的变量,但它显示了这个概念。
我的问题是我不知道怎么去往来自latlng。我正在使用navigator.geolocation.watchPosition来跟踪位置变化,所以我不知道如何获得以前的latlng。此外,如果有一种更容易的方法来做我一般都想做的事情,我都是耳朵。我觉得我已经过度思考了这一点,但也许它确实需要这一切。
我删除了我的api代码,但除此之外,这一切都按原样运行。
<!DOCTYPE html>
<html>
<head>
<title>GEOCODING TEST</title>
<style type="text/css">
html,
body {
height: 100% ;
margin: 0px 0px 0px 0px ;
overflow: hidden ;
padding: 0px 0px 0px 0px ;
width: 100% ;
}
#mapContainer {
height: 100% ;
width: 100% ;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key={MYAPIKEY}" type=
"text/javascript">
</script>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type=
"text/javascript">
</script>
</head>
<body>
<div id="mapContainer">
</div>
<script type="text/javascript">
var mapContainer = $( "#mapContainer" );
map = new google.maps.Map(
mapContainer[ 0 ],
{
zoom: 15,
center: new google.maps.LatLng(
40.700683,
-73.925972
),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
);
function addMarker (latitude, longitude){
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
latitude,
longitude
),
flat: true,
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor : 'red',
strokeWeight : 3,
scale: 6,
***//rotation: google.maps.geometry.spherical.computeHeading(from:LatLng, to:LatLng)
},
});
return( marker );
}
function updateMarker( marker, latitude, longitude, label ){
marker.setPosition(
new google.maps.LatLng(
latitude,
longitude
)
);
if (label){
marker.setTitle( label );
}
}
if (navigator.geolocation) {
var locationMarker = null;
navigator.geolocation.getCurrentPosition(
function( position ){
if (locationMarker){
return;
}
console.log( "Initial Position Found" );
locationMarker = addMarker(
position.coords.latitude,
position.coords.longitude,
"Initial Position"
);
},
function( error ){
console.log( "Something went wrong: ", error );
},
{
timeout: (5 * 1000),
maximumAge: (1000 * 60 * 15),
enableHighAccuracy: true
}
);
var positionTimer = navigator.geolocation.watchPosition(
function( position ){
console.log( "Newer Position Found" );
console.log (position);
updateMarker(
locationMarker,
position.coords.latitude,
position.coords.longitude,
"Updated / Accurate Position"
);
var pos = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
}
);
setTimeout(
function(){
// Clear the position watcher.
navigator.geolocation.clearWatch( positionTimer );
},
(1000 * 60 * 5)
);
}
</script>
<div id="map-canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
由于很难预测未来,如果您没有GPS设备的实时航向,请使用上一个点和更新的点。如果它不移动(或移动速度不够快),那将不会特别准确。
function updateMarker(marker, latitude, longitude, label) {
var prevPosn = marker.getPosition();
marker.setPosition(
new google.maps.LatLng(
latitude,
longitude
)
);
marker.setIcon({
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: 'red',
strokeWeight: 3,
scale: 6,
rotation: google.maps.geometry.spherical.computeHeading(prevPosn, marker.getPosition())
})
if (label) {
marker.setTitle(label);
}
}
为此目的创建了一个谷歌库,它被称为Geometry Libray。
此库中包含一组导航功能,可以帮助您计算距离,航向等。
你可以找到一个明确的例子here:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 34, lng: -40.605}
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push(
document.getElementById('info'));
marker1 = new google.maps.Marker({
map: map,
draggable: true,
position: {lat: 40.714, lng: -74.006}
});
marker2 = new google.maps.Marker({
map: map,
draggable: true,
position: {lat: 48.857, lng: 2.352}
});
var bounds = new google.maps.LatLngBounds(
marker1.getPosition(), marker2.getPosition());
map.fitBounds(bounds);
google.maps.event.addListener(marker1, 'position_changed', update);
google.maps.event.addListener(marker2, 'position_changed', update);
poly = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
map: map,
});
geodesicPoly = new google.maps.Polyline({
strokeColor: '#CC0099',
strokeOpacity: 1.0,
strokeWeight: 3,
geodesic: true,
map: map
});
update();
}
该折线是连接出发点和目的地点的虚拟线。
以上是关于Google Maps Javascript API V3中的旋转标记的主要内容,如果未能解决你的问题,请参考以下文章
在 typescript/javascript 的 google.maps.Geocoder().geocode() 上使用全局变量
Google Maps JavaScript API 警告:NoApiKeys
Google Maps Javascript API、DirectionsService、国家列表