地图是网页中使用频率比较高的插件,本文介绍如何调用百度地图插件,并向插件添加常用的功能.在调用接口前,请前往开放平台申请秘钥(AK),之后才能够顺利调用。
配合使用坐标拾取工具,快速获取坐标,点击查看
Hello World
<!DOCTYPE html>
<html>
<head>
<!--添加一个meta标签，以便使您的页面更好的在移动平台上展示-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>
上面的代码是调用地图最基本的代码,只要调用就需要用到。
添加控件
地图上负责与地图交互的UI元素称为控件,例如缩放的鱼骨、比例尺等等,下面是一个完整的代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"> </script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
//添加控件
//左上角的平移缩放控件,也叫鱼骨
map.addControl(new BMap.NavigationControl());
//左下角的比例尺控件
map.addControl(new BMap.ScaleControl());
//右下角的缩略图控件,非常小,点击展开,也叫鹰眼
map.addControl(new BMap.OverviewMapControl());
//右上角的地图类型控件,可将地图显示为卫星图和三维图
map.addControl(new BMap.MapTypeControl());
//版权控件
map.addControl(new BMap.CopyrightControl());
//eg:
//var myCopyright = new BMap.CopyrightControl({offset: new BMap.Size(250, 0)});
//设置版权信息偏移量
//map.addControl(myCopyright);
//为地图添加版权控件
//myCopyright.addCopyright({id : 1, content : '<a href="www.acier.cn" style="font-size: 20px">我是版权信息哦</a>'});
//空间位置属性 /*
BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。
BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。
BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。
BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。*/
//让平移缩放控件位于右上角
//map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));
//offset: new BMap.Size(5,40)用于控制控件的便宜,表示，距离左下角的原点，偏移X=5，Y=40像素的位置。
//eg:
//map.addControl(new BMap.ScaleControl({offset: new BMap.Size(5, 40)}));
</script>
</body>
</html>
覆盖物
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
//可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//监听标注事件
marker.addEventListener("click", function(){ alert("您点击了标注"); });
//让标记可拖拽
marker.enableDragging(); //开启拖拽
marker.addEventListener("dragend", function(e){
//监听标注的dragend事件来捕获拖拽后标注的最新位置。
alert("当前位置：" + e.point.lng + ", " + e.point.lat); })
//信息窗口
var opts = { width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("可以将内容写在这里", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
//折线
var polyline = new BMap.Polyline(
[ new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920) ],
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
);
map.addOverlay(polyline);
</script>
</body>
</html>
事件
例如鼠标或键盘的点击,拖动等这样的交互。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
//this得到地图缩放后的级别
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("zoomend", function(){ alert("地图缩放至：" + this.getZoom() + "级"); });
//监听事件移除示例
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
function showInfo(e){ alert(e.point.lng + ", " + e.point.lat);
map.removeEventListener("click", showInfo); }
map.addEventListener("click", showInfo);
</script>
</body>
</html>
地图图层
例如所看到包括街道、兴趣点、学校、公园等内容的地图展现就是一个图层，另外交通流量的展现也是通过图层来实现的。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
var traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例
map.addTileLayer(traffic); // 将图层添加到地图上
// 若要从地图上移除图层，需要调用map.removeTileLayer方法。
// map.removeTileLayer(traffic); // 将图层移除
</script>
</body>
</html>
以上代码只要把秘钥替换一下,就可以直接使用了,试试吧!
原创文章转载请注明：转载自：百度地图JavaScript API的调用
发表评论
沙发空缺中，还不快抢~