您的位置：首页 > 其它

高德地图开发--地图的显示

2017-10-16 16:18 232 查看

二维地图和卫星地图的展示,简单的实现方法如下：

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了！以后我会多多更新关于高德地图的相关的知识，就当给自己记笔记咯！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航