<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta charset="UTF-8">
<title>baiduMap Demo</title>
<style type="text/css">
body{;margin:20px;}
#container{width:960px;height:720px;}
</style> /*引用地图资源*/
<script type="text/javascript"src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<input type="text" placeholder="请在输入城市名称"/>
<input type="button" id="oButton" value="点击获取经纬度" >
<div id="container"></div>
<input type="button" onclick="add_control_one();" value="添加比例尺和缩放平移控件" >
<input type="button" onclick="delete_control_one();" value="删除比例尺和缩放平移控件" >
<br/>
<input type="button" onclick="add_control_two();" value="添加地图类型和缩略图" >
<input type="button" onclick="delete_control_two();" value="删除地图类型和缩略图" >
<script type="text/javascript">
//实例化地图，并初始化地图展示位置，必要设置
var map = new BMap.Map("container"); // 创建地图实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图，设置中心点坐标和地图级别
//以下是常用的可选设置
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
/*以下是比例尺和缩放平移控件*/
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
/*缩放控件type有四种类型:
BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
//添加控件和比例尺
function add_control_one(){
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
}
//移除控件和比例尺
function delete_control_one(){
map.removeControl(top_left_control);
map.removeControl(top_left_navigation);
map.removeControl(top_right_navigation);
}
/*以下是地图类型和缩略图*/
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_two(){
map.addControl(mapType1); //2D图，卫星图
map.addControl(mapType2); //左上角，默认地图控件
map.setCurrentCity("北京"); //由于有3D图，需要设置城市哦
map.addControl(overView); //添加默认缩略地图控件
map.addControl(overViewOpen); //右下角，打开
}
//移除地图类型和缩略图
function delete_control_two(){
map.removeControl(mapType1); //移除2D图，卫星图
map.removeControl(mapType2);
map.removeControl(overView);
map.removeControl(overViewOpen);
}
</script>
</body>
</html>
时间： 2024-07-29 09:44:47