百度地图开发API之加载地图和添加地图控件

最新推荐文章于 2023-09-12 18:44:59 发布

DynastyTing

最新推荐文章于 2023-09-12 18:44:59 发布

阅读量2.5k

点赞数 1

分类专栏： javaEE

javaEE 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>百度地图</title>
<script src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
var map
function initialize() {
var opt ={maxZoom:50,zoom:1};//设置地图BMap的MapOptions参数
var map = new BMap.Map("map",opt); //地理坐标点
var map_Point = new BMap.Point(115.557844,35.3068723);
var map_Pixel = new BMap.Pixel(10, 10);
map.centerAndZoom(map_Point, 15);
//map.enableContinuousZoom();
var bounds = map.getBounds();//获取地图的范围
//地图导航控件
var nav_size = new BMap.Size(10,10);//地图导航控件的参数
var map_Control = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,offset:nav_size,type:BMAP_NAVIGATION_CONTROL_LARGE,showZoomInfo:true});
map.addControl(map_Control);
//缩略地图控件
var size = new BMap.Size(100,100);//缩略图控件的参数
var map_OverView = new BMap.OverviewMapControl({size:size,isOpen:true});
map.addControl(map_OverView);
//比例尺寸控件
var map_Scale = new BMap.ScaleControl({anchor:BMAP_UNIT_IMPERIAL,offset:new BMap.Size(80,15)});
map.addControl(map_Scale);
//公司信息尺寸控件
var map_CopyRight = new BMap.CopyrightControl({id:2});
map.addControl(map_CopyRight);
//切换地图类型的控件
var map_type = new BMap.MapTypeControl();
map.addControl(map_type);
//添加一个覆盖物
var overlay = new BMap.Marker(map_Point,{enableClicking:true});
overlay.show();
/* overlay.enableDragging();
var label = new BMap.Label("名字");
label.setOffset(new BMap.Size(0,20));
label.setTitle("名字");
label.addEventListener("mouseover",function(){this.setContent("这里是百度");});
label.addEventListener("mouseout",function(){this.setContent("名字");});
overlay.setLabel(label); */
//infoWindow.enableCloseOnClick();
//infoWindow.setTitle("名字")
//当鼠标点击时打倒开InfoWindow
overlay.addEventListener(
"click",
function(){overlay.openInfoWindow(new BMap.InfoWindow("World",{title:"标题"}));}
);
map.addOverlay(overlay);
//应该在添加Marker后在打开InfoWindow才可以
var infoWindow= new BMap.InfoWindow("infoWindow");
overlay.openInfoWindow(infoWindow);
}
window.onload = initialize;
</script>
</head>
<body>
<div id="map" style="width: 1300px; height: 650px"></div>
<div id="infoWindow" style="width:50px;height:50px;border:1px solid #ccc;"></div>
</body>
</html>

DynastyTing

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图开发API之加载地图和添加地图控件

> html xmlns="http://www.w3.org/1999/xhtml"> head> title>百度地图title> script src="http://api.map.baidu.com/api?v=1.3">script> script type="text/javascript">
复制链接

扫一扫