<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Hello, World</title>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=1.3"></script> </head> <body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div> </body> </html>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建Map实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
</script>
下面我们来逐步分析代码程序
1. 我们引用地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?key=afsjfklasjflerwer54534354354&v=1.3&services=false"></script>
2. 创建地图容器元素
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
地图需要一个HTML元素作为容器,这样才能展现到页面上,这里我们创建了一个div元素,注意:一定要给这个元素给个id属性值 3. 命名空间
API使用BMap作为命名空间,所有类均在改命名空间下,比如:BMap.Map,BMap.Control.
4. 创建地图实例
var map = new BMap.Map("container");
位于BMap 命名空间下的Map 类表示地图,通过new 操作符可以创建一个地图实例。
其参数可以是元素id 也可以是元素对象。
注意在调用此构造函数时应确保容器元素已经添加到地图上。
5. 创建点坐标
var point = new BMap.Point(116.404, 39.915);
这里我们使用BMap 命名空间下的Point 类来创建一个坐标点。Point 类描述了一个地理坐标 点,其中116.404表示经度,39.915表示纬度。
6. 地图初始化
map.centerAndZoom(point,15);
在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中 心点坐标和地图级别。
地图必须经过初始化才可以执行其他操作。
3. 地图的操作
地图被实例化并完成初始化以后,就可以与其进行交互了。API 中的地图对象的外观与行为 与百度地图网站上交互的地图非常相似。
它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。 您也可以修改配置来改变这些功能。
您还可以通过编程的方式与地图交互。Map 类提供了若干修改地图状态的方法
1. 下面这个实例显示一个地图,在等待两秒后会重新回到地图的中点。如果移动距离过大则地图直接跳到该点。
<script type="text/javascript">
varmap = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
window.setTimeout(function(){
map.panTo(new BMap.Point(116.409, 39.918)); }, 2000);
</script>
2 地图控件
我们经常可以看到地图中有一个小控件,这个控件可以改变地图显示程度。百度地图API中提供了丰富的控件,你可以自己动手做一个漂亮的控件
地图API中提供的控件有:
NavigationControl:地图平移缩放控件,默认位于地图左上方,它包含控制地图的平移和缩 放的功能。
OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。 ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。 CopyrightControl:版权控件,默认位于地图左下方。
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());
</script>
添加控件我们可以用map.addControl()来实现。
3 . 覆盖物
所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会 相应的移动。
地图API 提供了如下几种覆盖物:
Overlay:覆盖物的抽象基类,此类不可实例化,所有的覆盖物均继承此类的方法。 Marker:标注表示地图上的点,可自定义标注的图标。
Label:表示地图上的文本标注,您可以自定义标注的文本内容。 Polyline:表示地图上的折线。
Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外您也可以为其添加填充颜 色。
InfoWindow:信息窗口也是一种特殊的覆盖物。注意:同一时刻只能有一个信息窗口在地 图上打开。
可以使用BMap.Map.addOverlay() 方法向地图添加覆盖物, 使用BMap.Map.removeOverlay()方法移除覆盖物,注意此方法不适用于InfoWindow。
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
varmarker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中
</script>
标注表示地图上的点。
API 提供了默认图标样式,您也可以通过Icon 类来指定自定义图标。
BMap.Marker 的构造函数的参数为BMap.Point 和BMap.MarkerOptions(可选)。
注意: 当您使用自定义图标时,标注的地理坐标点将位于标注所用图标的中心位置,您可通过Icon 的offset 属性修改标定位置。
1. 信息窗口
信息窗口在地图上方的浮动显示HTML 内容。
信息窗口可直接在地图上的任意位置打开, 也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。
您可以使用 BMap.InfoWindow 来创建一个信息窗实例,注意同一时刻地图上只能有一个信息窗口处于 打开状态。
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(point);
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题 }
map.centerAndZoom(point, 15);
map.addOverlay(marker);
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow); });
5右键菜单
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
var menu = new BMap.ContextMenu();
var txtMenuItem = [ {
text:'放大',
callback:function(){map.zoomIn()} }, {
text:'缩小',
callback:function(){map.zoomOut()} } ];
for(var i=0; i < txtMenuItem.length; i++){
menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
}
map.centerAndZoom(point,15);
map.addContextMenu(menu);
</script>
6工具条实例
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var myPushpin = new BMap.PushpinTool(map); // 创建标注工具实例
myPushpin.addEventListener("markend", function(e){
alert("您标注的位置:" + e.marker.getPosition().lng + ", " + e.marker.getPosition().lat); });
myPushpin.open();
</script>
7服务实例 周边搜索
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var local = new BMap.LocalSearch(map, { renderOptions:{map: map, autoViewport:true} });
local.searchNearby("小吃", "前门");
</script>
8驾车方案选择
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
map.enableScrollWheelZoom();
var start = "魏公村" ,end = "百度大厦",routePolicy =
[BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
var arrInput = document.getElementById("dvPolicy").getElementsByTagName("input");
search(start,end,routePolicy[0]);
document.getElementById("dvPolicy").onclick = function(e){
e = e || window.event;
var elem = e.srcElement || e.target , policyIndex;
if(elem.tagName.toLowerCase() == "input"){
policyIndex = elem.getAttribute("id").replace("policy","");
map.clearOverlays();
search(start,end,routePolicy[policyIndex]);
} }
function search(start,end,route){
var transit = new BMap.DrivingRoute(map, {
renderOptions: {map: map,panel:"results"},
policy: route });
transit.search(start,end); }
</script>
IP定位
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point,15);
function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
alert(cityName); }
var myCity = new BMap.LocalCity();
myCity.get(myFun);
</script>