Javascript 缓冲区动画谷歌地图不显示_Javascript_Php_Google Maps

Javascript 缓冲区动画谷歌地图不显示

javascript php google-maps

Javascript 缓冲区动画谷歌地图不显示,javascript,php,google-maps,Javascript,Php,Google Maps,我在谷歌地图上制作了一个缓冲区动画。当我在我的网站上运行它时，它不起作用。我使用javascript和php来实现它这是我的php代码： <html> <head> <title>Google Map</title> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> &

我在谷歌地图上制作了一个缓冲区动画。当我在我的网站上运行它时，它不起作用。我使用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>


谷歌地图
$（文档）.ready（函数（）{
var映射；
var mycity=newgoogle.maps.LatLng（51.5120，-0.12）；
var bigOne=newgoogle.maps.LatLng（51.5120，-0.12）；
var smallOne=newgoogle.maps.LatLng（51.5120，-0.12）；
变量选项={
缩放：14，
中心：mycity，
scaleControl：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（$（'#map'）[0]，选项）；
var myCity=new google.maps.Circle({
中心：bigOne，
半径：150，
strokeColor:#E16D65“，
冲程重量：2，
填充颜色：“E16D65”，
填充不透明度：0
});
var smallcircle=new google.maps.Circle({
中心：smallOne，
半径：300，
strokeColor:#E16D65“，
频闪不透明度：1，
冲程重量：2，
填充颜色：“E16D65”，
填充不透明度：0
});
myCity.setMap（map）；
smallcircle.setMap（map）；
});
#动画{
位置：相对位置；
宽度：100%；
高度：200px；
背景：#EEE；
}
#地图{
高度：400px；
宽度：100%；
}
多特先生{
位置：绝对位置；
顶部：80px；
左：150px；
背景：#00C0FF；
盒影：1px02px0RGBA（0,0,0,5）；
身高：0；
宽度：0；
填充：4px；
边界半径：5000px；
}
.dot:之前.dot:之后{
位置：绝对位置；
内容：“；
边界半径：继承；
高度：0px；
宽度：0px；
盒影：0 0 2px 2px#FF0000；
转换：翻译（-50%，-50%）；
动画：普赛纳2s无限放松；
}
点：之后{
高度：7px；
宽度：7px；
盒影：0 0 4px2px#FFFF00；
动画：脉冲输出；
}
@-webkit关键帧{
0% {
身高：0；
宽度：0；
不透明度：0；
}
20% {
不透明度：1
}
95% {
高度：125px；
宽度：125px；
不透明度：0.25；
}
100% {
不透明度：0；
}
}
@-moz关键帧{
0% {
身高：0；
宽度：0；
不透明度：0；
}
20% {
不透明度：1
}
95% {
高度：125px；
宽度：125px；
不透明度：0.25；
}
100% {
不透明度：0；
}
}
@关键帧脉冲发生器{
0% {
身高：0；
宽度：0；
不透明度：0；
}
20% {
不透明度：1
}
95% {
高度：125px；
宽度：125px；
不透明度：0.25；
}
100% {
不透明度：0；
}
}
@-webkit关键帧{
0% {
高度：7px；
宽度：7px；
不透明度：0；
}
20% {
不透明度：1
}
100% {
高度：250px；
宽度：250px；
不透明度：0.25；
}
}
@-moz关键帧{
0% {
高度：7px；
宽度：7px；
不透明度：0；
}
20% {
不透明度：1
}
100% {
高度：250px；
宽度：250px；
不透明度：0.25；
}
}
@关键帧脉冲外部{
0% {
高度：7px；
宽度：7px；
不透明度：0；
}
20% {
不透明度：1
}
100% {
高度：250px；
宽度：250px；
不透明度：0.25；
}
}

我不知道有什么问题。我的网站没有结果。有人能帮我吗？

谢谢

您的代码中有许多与语法相关的问题。工作演示：

您忘记在
```
-moz keyframes
```
和
```
-webkit keyframes
```
中添加动画名称
您没有添加特定于浏览器的css动画规则，例如
```
-webkit animation
```
和
```
-moz animation
```
。与
```
转换
```
和
```
转换
```
css属性相同
你错过了关门时间