百度地图 点击地图类型控件切换普通地图、卫星图、三维图、混合图(卫星图+路网),右下角是缩略图

时间:2024-05-19 15:09:45

百度地图 点击地图类型控件切换普通地图、卫星图、三维图、混合图(卫星图+路网),右下角是缩略图

百度地图 点击地图类型控件切换普通地图、卫星图、三维图、混合图(卫星图+路网),右下角是缩略图

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

#allmap{width:100%;height:500px;}

#r-result{width:100%;margin-top:5px;}

p{margin:5px; font-size:14px;}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的**"></script>

<title>添加/删除地图类型、缩略图控件</title>

</head>

<body>

<div id="allmap"></div>

<div id="r-result">

<input type="button" onclick="add_control();" value="添加" />

<input type="button" onclick="delete_control();" value="删除" />

</div>

<p>点击地图类型控件切换普通地图、卫星图、三维图、混合图(卫星图+路网),右下角是缩略图,点击按钮查看效果</p>

</body>

</html>

<script type="text/javascript">

// 百度地图API功能

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

 

var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});

var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});

 

var overView = new BMap.OverviewMapControl();

var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});

//添加地图类型和缩略图

function add_control(){

map.addControl(mapType1);          //2D图,卫星图

map.addControl(mapType2);          //左上角,默认地图控件

map.setCurrentCity("北京");        //由于有3D图,需要设置城市哦

map.addControl(overView);          //添加默认缩略地图控件

map.addControl(overViewOpen);      //右下角,打开

}

//移除地图类型和缩略图

function delete_control(){

map.removeControl(mapType1);   //移除2D图,卫星图

map.removeControl(mapType2);

map.removeControl(overView);

map.removeControl(overViewOpen);

}

</script>