问题描述
显示一个脉动的GPS位置蓝点(位于该网页的底部)。
有没有人知道如何在用户的当前GPS位置(而不是刚刚出现在静态地图上)在交互式Google API地图上显示这样的特定CSS动画?
我曾想过使用,然后将其放置在div图层的顶部,但不确定是否将是最好的方法,或者是否有人已经提出了一个替代方案。
var scale = Math.pow .getZoom());
var nw = new google.maps.LatLng(
map.getBounds()。getNorthEast()。lat(),
map.getBounds()。getSouthWest()。lng()
);
var worldCoordinateNW = map.getProjection()。fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection()。fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
Math.floor((worldCoordinate.x - worldCoordinateNW.x)* scale),
Math.floor(worldcoordinate.y - worldCoordinateNW。 y)* scale)
);
您可以使用第三方库HTML标记。一个选项是,让HTML / CSS在其中生成脉动圆。 / p>
代码段:
function initialize(){var map = new google.maps.Map(document.getElementById(map_canvas),{center:new google.maps.LatLng(37.4419,-122.1419),zoom: mapTypeId:google.maps.MapTypeId.ROADMAP}); var polyline = new google.maps.Polyline({map:map,path:[]})var div = document.getElementById(marker); // document.createElement('DIV'); // div.innerHTML ='< div class =my-other-marker>我是平面标记!< / div>'; var marker2 = new RichMarker({map:map,position:map.getCenter(),draggable:true,flat:true,anchor:RichMarkerPosition.MIDDLE,content:div}); polyline.getPath()。push(marker2.getPosition()); var angle = 0; setInterval(function(){angle + = 5; angle%= 360; marker2.setPosition(google.maps.geometry.spherical.computeOffset(map.getCenter(),1000,angle)); polyline.getPath marker2.getPosition());},2000);} google.maps.event.addDomListener(window,load,initialize);
html,body,#map_canvas {height:100%; width:100%; margin:0px; padding:0px} .marker {width:100px; height:100px; position:absolute; top:-50px; / *位置我们的标记* / left:-50px; / *位置我们的标记* / display:block;}。pin {width:20px; height:20px;位置:相对; top:38px; left:38px; background:rgba(5,124,255,1); border:2px solid #FFF; border-radius:50%; z-index:1000;}。pin-effect {width:100px; height:100px; position:absolute; top:0;显示:block;背景:rgba(5,124,255,0.6); border-radius:50%;不透明度:0; animation:pulsate 2400ms ease-out infinite;} @ keyframes pulsate {0%{transform:scale(0.1);不透明度:0; } 50%{opacity:1; } 100%{transform:scale(1.2);不透明度:0; }}
< script src =https:// maps.googleapis.com/maps/api/js?libraries=geometry\"> ;</script><script src =https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages /src/richmarker.js\"> ;</script> ;<div id =map_canvas>< / div>< div id =markerdisplay =hiddenclass =marker> < div class =pin>< / div> < div class =pin-effect>< / div>< / div>
$ b
http://bluefaqs.com/2016/02/how-to-animate-a-map-location-marker-with-css/ shows a pulsating GPS location blue dot (at the bottom of that page).
Does anyone know how such a particular CSS animation can be shown on an interactive Google API Map, at the user's current GPS location (as opposed to just appearing on a static map)?
I had thought of using How to access Google Maps API v3 marker's DIV and its pixel position? to then position it over the top of the map in a div layer but wasn't sure if that would be the best approach or whether someone had already come up with an alternative.
var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
map.getBounds().getNorthEast().lat(),
map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);
You could use one of the third party libraries that allow "HTML" Markers. One option is RichMarker, put the HTML/CSS to generate the pulsating circle in there.
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var polyline = new google.maps.Polyline({
map: map,
path: []
})
var div = document.getElementById("marker"); // document.createElement('DIV');
// div.innerHTML = '<div class="my-other-marker">I am flat marker!</div>';
var marker2 = new RichMarker({
map: map,
position: map.getCenter(),
draggable: true,
flat: true,
anchor: RichMarkerPosition.MIDDLE,
content: div
});
polyline.getPath().push(marker2.getPosition());
var angle = 0;
setInterval(function() {
angle += 5;
angle %= 360;
marker2.setPosition(google.maps.geometry.spherical.computeOffset(map.getCenter(), 1000, angle));
polyline.getPath().push(marker2.getPosition());
}, 2000);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.marker {
width: 100px;
height: 100px;
position: absolute;
top: -50px;
/*positions our marker*/
left: -50px;
/*positions our marker*/
display: block;
}
.pin {
width: 20px;
height: 20px;
position: relative;
top: 38px;
left: 38px;
background: rgba(5, 124, 255, 1);
border: 2px solid #FFF;
border-radius: 50%;
z-index: 1000;
}
.pin-effect {
width: 100px;
height: 100px;
position: absolute;
top: 0;
display: block;
background: rgba(5, 124, 255, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulsate 2400ms ease-out infinite;
}
@keyframes pulsate {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script>
<div id="map_canvas"></div>
<div id="marker" display="hidden" class="marker">
<div class="pin"></div>
<div class="pin-effect"></div>
</div>
这篇关于使用CSS为Google API地图标记制作动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!