概述
二维地图和卫星地图的展示,简单的实现方法如下：
jsp：主要代码
<html>
<head>
<title>高德地图开发--地图的显示</title>
</head>
<!-- 高德加载地图必须【缺一不可】 -->
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.4.0&key=e921a735c7febb0387e93d03b60e2dfe"></script>
<!-- 工具条的显示 -->
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<body>
<div id="container">
</div>
<div style="position: absolute;top:100px;right: 0px;z-index: 998;display: block;text-align: center;width:70px;" >
<input type="button" id="wxmap" class="sw_an" value="卫星地图" style="margin-top: 4px">
</div>
<script type="text/javascript" src="js/gd.js"></script>
</body>
</html>
js：主要代码
var map = new AMap.Map('container',{
zoom: 13,//第一次加载的地图的级别
zooms: [11,19],//设置最小级别和最大级别
center:[116.33,40.00]//
});
var googleWxLayer=new AMap.TileLayer.Satellite();
//卫星地图
var wxmap=false;
AMap.event.addDomListener(document.getElementById('wxmap'), 'click', function() {
if (wxmap) {
//googleLayer.hide();
googleWxLayer.setMap(null);
wxmap = false;
} else {
googleWxLayer.setMap(map);
wxmap = true;
}
}, false);
上面的地面是点击按钮可以显示卫星地图，如果仅仅只是显示地图的话，那就更简单了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>高德地图开发--地图的显示</title>
</head>
<!-- 高德加载地图必须 -->
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.4.0&key=e921a735c7febb0387e93d03b60e2dfe"></script>
<!-- 工具条的显示 -->
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<body>
<div id="container">
</div>
<script type="text/javascript">
var map = new AMap.Map('container',{
zoom: 13,
zooms: [11,19],
center:[116.33,40.00]
});
</script>
</body>
</html>
就这些代码就OK了！以后我会多多更新关于高德地图的相关的知识，就当给自己记笔记咯！
最后
以上就是义气小虾米为你收集整理的高德地图开发--地图的显示的全部内容，希望文章能够帮你解决高德地图开发--地图的显示所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复