-1
我在谷歌地圖製作緩衝區動畫。當我在網上運行它時，它不工作。我使用JavaScript和PHP來製作它。緩衝區動畫谷歌地圖不顯示
這是我的PHP代碼：
<html>
<head>
<title>Google Map</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD21hdItqZ1Rba2uU8z9i922vPFp5DgdzE&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
var map;
var mycity = new google.maps.LatLng(51.5120, -0.12);
var bigOne = new google.maps.LatLng(51.5120, -0.12);
var smallOne = new google.maps.LatLng(51.5120, -0.12);
var options = {
zoom: 14,
center: mycity,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);
var myCity = new google.maps.Circle({
center: bigOne,
radius: 150,
strokeColor: "#E16D65",
strokeWeight: 2,
fillColor: "#E16D65",
fillOpacity: 0
});
var smallcircle = new google.maps.Circle({
center: smallOne,
radius: 300,
strokeColor: "#E16D65",
strokeOpacity: 1,
strokeWeight: 2,
fillColor: "#E16D65",
fillOpacity: 0
});
myCity.setMap(map);
smallcircle.setMap(map);
});
</script>
<style type="text/css">
#animation {
position: relative;
width: 100%;
height: 200px;
background: #EEE;
}
#map {
height: 400px;
width: 100%;
}
.dot {
position: absolute;
top: 80px;
left: 150px;
background: #00C0FF;
box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .5);
height: 0;
width: 0;
padding: 4px;
border-radius: 5000px;
}
.dot:before, .dot:after {
position: absolute;
content:" ";
border-radius: inherit;
height: 0px;
width: 0px;
box-shadow: 0 0 2px 2px #FF0000;
transform: translate(-50%, -50%);
animation: pulseInner 2s infinite ease-out;
}
.dot:after {
height: 7px;
width: 7px;
box-shadow: 0 0 4px 2px #FFFF00;
animation: pulseOuter 2s infinite ease-out;
}
@-webkit-keyframes {
0% {
height: 0;
width: 0;
opacity: 0;
}
20% {
opacity: 1
}
95% {
height: 125px;
width: 125px;
opacity: 0.25;
}
100% {
opacity: 0;
}
}
@-moz-keyframes {
0% {
height: 0;
width: 0;
opacity: 0;
}
20% {
opacity: 1
}
95% {
height: 125px;
width: 125px;
opacity: 0.25;
}
100% {
opacity: 0;
}
}
@keyframes pulseInner {
0% {
height: 0;
width: 0;
opacity: 0;
}
20% {
opacity: 1
}
95% {
height: 125px;
width: 125px;
opacity: 0.25;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes {
0% {
height: 7px;
width: 7px;
opacity: 0;
}
20% {
opacity: 1
}
100% {
height: 250px;
width: 250px;
opacity: 0.25;
}
}
@-moz-keyframes {
0% {
height: 7px;
width: 7px;
opacity: 0;
}
20% {
opacity: 1
}
100% {
height: 250px;
width: 250px;
opacity: 0.25;
}
}
@keyframes pulseOuter {
0% {
height: 7px;
width: 7px;
opacity: 0;
}
20% {
opacity: 1
}
100% {
height: 250px;
width: 250px;
opacity: 0.25;
}
}
</style>
</head>
<body>
<div id="animation">
<div class="dot"></div>
</div>
<hr>
<div id="map"></div>
</body>
</html>
我不知道什麼問題。我的網站沒有任何結果。有誰能夠幫助我？ 謝謝