<style>
* {
margin:0;
padding:0;
}
body {
background:black;
overflow:hidden;
}
.container {
width:20px;
height:60px;
position:absolute;
}
.nav {
height:20px;
width:20px;
display:block;
margin-top:12px;
border-radius:10px;
background:#33ccff;
opacity:0.8;
background: url(1.jpg) no-repeat center;
background-size: auto 100%;
}
</style>
<script>
$(function() {
var w = window.screen.width;
var h = window.screen.height;
var count = 0;
var drop = function() {
this.v = Math.random() * 1 0.5;
this.left = Math.random() * w;
}
drop.prototype = {
constructor: drop,
create: function() {
count ;
var $drop = $('<div class="container"><span class="nav"></span></div>');
$drop.appendTo('body');
},
addCss: function() {
$('.container:last').css({
left: this.left 'px'
})
},
dropEvent: function() {
var time = Math.floor(h / this.v);//下降速度
$('.container:last').animate({
top: h 'px',
opacity: '1'
}, time)
}
}
function updata() {
if(count > 200) {
for(var i = 0; i < 100; i ) {
$('div:first').remove();
}
count = 0;
}
}
setInterval(function() {
var Drop = new drop();
Drop.create();
Drop.addCss();
Drop.dropEvent();
updata();
}, 50)
})
</script>
这个不难，主要是注册开发者，创建应用，然后通过JS API在html网页中引入3D地图，下面我简单介绍一下实现过程，主要内容如下：
1.首先，注册高德地图开发者，这个直接在官网上注册，输入必要信息就行，如下：
2.注册完成后，进入个人中心，依次点击“应用管理”->“我的应用”->“创建新应用”，如下，这里输入应用名称，选择类型就行：
接着就需要为应用添加key值，点击右上角的 号，就会弹出添加窗口，这里我们选择“Web端（JS API）”，如下：
添加key值成功后，就会在应用列表中看到刚才添加的key值，如下，后面的代码中需要用到这个key值：
3.最后就是编写代码，在html页面中引入3D地图了，如下，代码很简单，主要是创建div容器，然后通过JS引入地图到这个容器中，这里需要JS API版本在1.4.0以上，指定地图模式为3D，key值替换成自己应用的key值：
用浏览器打开这个html页面，效果如下，已经成功引入3D地图：
至此，我们就完成了在html页面中引入高德3D地图。总的来说，整个过程不难，代码量也不是很多，只要你熟悉一下流程和相关示例，很快就能掌握的，官网提供了非常丰富的开发文档，非常适合初学者学习，感兴趣的可以搜一下，网上相关资料也很多，可以借鉴一下，希望以上分享的内容能对你有所帮助吧，也欢迎大家评论、留言。
