百度地图API之自定义控件 - 俗人... - 博客园
最近因为需要，研究了一下地图API，有Google的、百度的、还有MapABC的，有MapBar的，虽然个人觉得Google地图比起其他的要强得不止一点两点 ，但最终还是选择了百度地图，主要原因是Google地图没有直接的公交查询接口，这是唯一让人遗憾的事情。而其他地图有些功能是不免费对外开放的，只有百度地图免费开放程度最大。但是百度地图有一个最让人头痛的地方，那就是非常不稳定...而且貌似对商业项目有一定的查询限制。非常纳闷的是当我知道这个情况的时候，项目已经做得差不多了，之前是打算用Google，但后来做到一半发现Google地图没有直接的公交查询接口。转而用MapABC，但是又发现它一些功能需要Money的。当选择用MapBar的时候就非常小心了，但最后结果很让人不满意...这其中可谓一波三折啊。最后选择用百度的，这次是不能再变了。项目经不起折腾啊...
　　好了，废话不多说了，下面是我用百度API做的一个搜索控件，直接上代码：
1 // 添加事件
2 &function addEventHandler(tatget, eventName, handler) {
if (tatget.addEventListener) {
tatget.addEventListener(eventName, handler, false);
} else if (tatget.attachEvent) {
tatget.attachEvent("on" + eventName, handler);
tatget["on" + eventName] =
12 &// 移除事件 13 &function removeEventHandler(tatget, eventName, handler) { 14
if (tatget.removeEventListener) { 15
tatget.removeEventListener(eventName, handler, false); 16
} else if (tatget.eventName) { 17
tatget.detachEvent("on" + eventName, handler); 18
} else { 19
tatget["on" + eventName] = null; 20
23 // 判断是否存在某className 24 function hasClass(target, name) { 25
return target.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)')); 26 } 27
28 // 移除class 29 function removeClass(target, name) { 30
if (hasClass(target, name)) { 31
target.className = target.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' '); 32
35 // 添加class 36 function addClass(target, name) { 37
if (!hasClass(target, name)) { 38
target.className += " " + 39
42 // 获取location 43 function loc(target, dire) { 44
var i = 0; 45
while (target) { 46
i += target["offset" + dire]; 47
if (target.offsetParent) { 48
if (target.offsetParent.style.position == "absolute") { 49
target = target.offsetP 53
return 55 } 56
57 String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); } 58 String.prototype.format = function() { var txt = this; i = arguments[0]. while (i--) { txt = txt.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[0][i]); } return } 59
60 // SearchBox控件 61 function SearchBox(options) { 62
this.callback = null;//回调函数,在点击搜索时调用，需要我们去覆盖的 63
this.pretender = document.createElement("ul");// 下拉列表的容器 64
this.searchBox = document.createElement("input");// 搜索框 65
this.searchBox.setAttribute("type", "text");
this.searchButton = document.createElement("input");// 搜索按钮 67
this.searchButton.setAttribute("type", "button"); 68
this.map = null;// 地图对象 69
if(options) 71
this.defaultAnchor = options.anchor || BMAP_ANCHOR_BOTTOM_RIGHT;// 默认停靠在地图的右下方 73
this.defaultOffset = options.offset || new BMap.Size(10, 10);// 默认与地图边界的margin 74
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;// 默认停靠在地图的右下方 78
this.defaultOffset = new BMap.Size(10, 10);// 默认与地图边界的margin 79
this.city = "";// 在哪个城市搜索? 81 } 82
83 // 继承自百度地图控件类 84 SearchBox.prototype = new BMap.Control(); 85
86 // 初始化 87 SearchBox.prototype.initialize = function(map) { 88
this.map = 89
var casing = document.createElement("div"); 90
casing.className = "searchbox_casing"; 91
var txt = this.searchB 93
txt.className = "searchbox_box"; 94
var drop = this. 96
var self = this; 98
addEventHandler(txt, "blur", function() { 99
window.setTimeout(function() { drop.style.display = "none"; }, 150);100
addEventHandler(txt, "keydown", function(e) {102
var key = txt.value.trim();103
var code = e ? (e.charCode || e.keyCode) : 0;104
if (key != "" && (code == 38 || code == 40)) {105
var curr = null;106
var childs = drop.childN107
for (var i = 0; i & childs. i++) {108
if (hasClass(childs[i], "curr")) {109
removeClass(childs[i], "curr");110
switch (code) {111
case 38:112
curr = childs[i].previousS113
case 40:115
curr = childs[i].nextS116
if (!curr) {122
switch (code) {123
case 38:124
curr = drop.lastC125
case 40:127
curr = drop.firstC128
addClass(curr, "curr");132
txt.value = curr.innerHTML;133
else if (code == 13) {135
self.search();136
return false;137
});139 140
var timer = 0;141
var town = this.142
window.setInterval(function() {143
if (timer & 0) {144
timer -= 2;145
} else if (timer & 0) {146
timer = 0;147
var key = txt.value.trim();148
if (key != "") {149
var callback = function(result) {150
if (result) {151
var count = result.getCurrentNumPois();152
if (count & 0) {153
drop.innerHTML = "";154
for (var i = 0; i & i++) {155
var item = result.getPoi(i);156
var item_box = document.createElement("li");157
item_box.innerHTML = item.158 159
addEventHandler(item_box, "mouseover", (function(item_box) { return function() { addClass(item_box, "hover"); } })(item_box));160
addEventHandler(item_box, "mouseout", (function(item_box) { return function() { removeClass(item_box, "hover"); } })(item_box));161
addEventHandler(item_box, "click", (function(item_box) { return function() { txt.value = item_box.innerHTML; } })(item_box));162
drop.appendChild(item_box);163
var size = map.getSize();166
var map_container = map.getContainer();167
var offs = self.getOffset();168 169
var left = loc(map_container, "Left");170
var top = loc(map_container, "Top");171
switch (self.getAnchor()) {172
case BMAP_ANCHOR_TOP_LEFT:173
top += offs.height + 30;174
left += offs.width + 25;175
case BMAP_ANCHOR_TOP_RIGHT:177
top += offs.height + 30;178
left += size.width - offs.width - 432;179
case BMAP_ANCHOR_BOTTOM_LEFT:181
top += size.height - offs.182
left += offs.width + 25;183
case BMAP_ANCHOR_BOTTOM_RIGHT:185
top += size.height - offs.186
left += size.width - offs.width - 432;187
drop.style.left = left + "px";190
drop.style.top = top + "px";191
drop.style.display = "block";192
var options = { pageCapacity: 10, onSearchComplete: callback };196
new BMap.LocalSearch(town || map, options).search(key);197
} else {198
drop.style.display = "none";199
}, 50);202 203
addEventHandler(txt, "keyup", function(e) {204
e = e || window.205
var code = e ? (e.charCode || e.keyCode) : 0;206
if ((code & 37 || code & 40) && code != 13) {207
timer = 11;208
});210 211
casing.appendChild(txt);212
this.pretender.className = "searchbox_pretender";213 214
map.getContainer().parentNode.appendChild(this.pretender);215 216
var btn = this.searchB217
btn.className = "searchbox_btn";218 219
addEventHandler(btn, "click", function() {220
self.pretender.style.display = "none";221
self.search();222
});223 224
casing.appendChild(btn);225 226
map.getContainer().appendChild(casing);227
return228 }229 230 SearchBox.prototype.search = function() {231
var key = this.searchBox.232
if (key == "") {233
alert("请输入您要搜索的地址！");234
return;235
this.pretender.style.display = "none";238 239
var self = this;240
var geocoder = new BMap.Geocoder();241
geocoder.getPoint(key, function(point) {242
self.callback(point);243
}, this.city);244 }
&下面是页面调用的代码：
1 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& 2 &html xmlns="http://www.w3.org/1999/xhtml"& 3 &head& 4
&title&百度地图自定义控件&/title& 5
&!-- 导入样式 --& 6
&link href="js/searchbox/searchbox.css" rel="stylesheet" type="text/css" /& 7
&!-- 导入百度地图API脚本 --& 8
&script type="text/javascript" src="http://api./api?v=1.1&services=true"&&/script& 9
&!-- 导入控件脚本 --&10
&script type="text/javascript" src="js/searchbox/searchbox.js"&&/script&11 12
&style type="text/css"&13
width: 800px;16
height: 500px;17
&/style&19 &/head&20 &body onload="pageLoad();"&21
&div id="map" class="searchbox_casing"&22
&/div&23 24
&script type="text/javascript"&25
function pageLoad() {27
var zoom = 14;28
map = new BMap.Map("map");29
map.enableScrollWheelZoom();30
map.addControl(new BMap.NavigationControl());31
map.centerAndZoom(new BMap.Point(113.287967,23.138278), zoom);32
var searchbox = new SearchBox({anchor:BMAP_ANCHOR_TOP_RIGHT});// 创建搜索控件对象，并设置它停靠在地图的右上位置34
searchbox.city = "北京市";// 在北京市查找数据35
searchbox.callback = function(point){// 设置回调函数36
// 如果找到地址了就在该坐标添加一个标记37
if(point)38
map.centerAndZoom(point, zoom);40
marker = new BMap.Marker(point);41
map.addOverlay(marker);42
alert("没查到数据！");46
map.addControl(searchbox);
// 将搜索控件添加到地图上49
&/script&51 52 &/body&53 &/html&
顺便把CSS样式也贴上来，我用的是Firefox 4.0,本人样式比较菜鸟，在其他浏览器可能会有点走位...
1 .searchbox_casing { width :<span style="color: #px;overflow :hidden;height :30px;}2 .searchbox_casing .searchbox_box { border:none; text-indent:30px; width:<span style="color: #px; height:31px; overflow:hidden; line-height:31px;background:url("images/txt_bg.gif") no-repeat 0 -64px;}3 .searchbox_casing .searchbox_btn { border:none; cursor:pointer; width:80px; height:30px; font-size:14px; background:url("images/btnsearch_bg.gif") no-repeat; text-align:center; color:#fff; padding-top:0px;}4 .searchbox_pretender { list-style:none; padding:0; font-size:12px; margin:0; width:<span style="color: #px; display:none; position:absolute; z-index:<span style="color: #; border:solid 2px #ADADAC; background:#fff;}5 .searchbox_pretender li { padding:2px 0 2px 5px; list-style:none; margin:0;}6 .searchbox_pretender li.curr { background:#FDC451; }7 .searchbox_pretender li.hover { background:#FDC451; cursor:pointer;}
另外贴上效果图：
阅读(...) 评论()
Copyright & 俗人...
Powered by:
模板提供：请教：百度地图中container是指哪个控件？
var map = new BMap.Map(&container&);
[问题点数：30分，结帖人nongfuxu]
请教：百度地图中container是指哪个控件？
var map = new BMap.Map(&container&);
[问题点数：30分，结帖人nongfuxu]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2009年7月 总版技术专家分月排行榜第二2009年3月 总版技术专家分月排行榜第二2009年1月 总版技术专家分月排行榜第二2005年7月 总版技术专家分月排行榜第二2005年5月 总版技术专家分月排行榜第二2005年3月 总版技术专家分月排行榜第二
优秀小版主2015年8月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2015年2月论坛优秀版主
本帖子已过去太久远了，不再提供回复功能。Android开发
出自百度地图API
此类是地图API的核心类，用来实例化一个地图。
构造函数描述
Map(container:String|HTMLElement[, opts:MapOptions]) 在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。
方法返 回 值描述
enableDragging()
none 启用地图拖拽，默认启用。
disableDragging()
none 禁用地图拖拽。
enableScrollWheelZoom()
启用滚轮放大缩小，默认禁用。
disableScrollWheelZoom()
禁用滚轮放大缩小。
enableDoubleClickZoom()
启用双击放大，默认启用。
disableDoubleClickZoom()
none 禁用双击放大。
enableKeyboard()
启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。
disableKeyboard()
none 禁用键盘操作。
enableInertialDragging()
none 启用地图惯性拖拽，默认禁用。(自 1.1 新增)
disableInertialDragging()
none 禁用地图惯性拖拽。(自 1.1 新增)
enableContinuousZoom()
none 启用连续缩放效果，默认禁用。(自 1.1 新增)
disableContinuousZoom()
禁用连续缩放效果。(自 1.1 新增)
enablePinchToZoom()
none 启用双指操作缩放，默认启用。(自 1.1 新增)
disablePinchToZoom()
禁用双指操作缩放。(自 1.1 新增)
enableAutoResize()
none 启用自动适应容器尺寸变化，默认启用。(自 1.2 新增)
disableAutoResize()
禁用自动适应容器尺寸变化。(自 1.2 新增)
setDefaultCursor(cursor:String)
设置地图默认的鼠标指针样式。参数cursor应符合CSS的cursor属性规范。(自 1.1 新增)
getDefaultCursor()
返回地图默认的鼠标指针样式。(自 1.1 新增)
setDraggingCursor(cursor:String)
设置拖拽地图时的鼠标指针样式。参数cursor应符合CSS的cursor属性规范。(自 1.1 新增)
getDraggingCursor()
返回拖拽地图时的鼠标指针样式。(自 1.1 新增)
setMinZoom(zoom:Number)
设置地图允许的最小级别。取值不得小于地图类型所允许的最小级别。(自 1.2 新增)
setMaxZoom(zoom:Number)
设置地图允许的最大级别。取值不得大于地图类型所允许的最大级别。(自 1.2 新增)
方法返回值描述
getBounds()
Bounds 返回地图可视区域，以地理坐标表示。
getCenter()
Point返回地图当前中心点。
getDistance(start:Point, end:Point)
Number返回两点之间的距离，单位是米。(自 1.1 新增)
getMapType()
MapType返回地图类型。(自 1.2 新增)
Size 返回地图视图的大小，以像素表示。
getViewport(view: Array&Point&[, viewportOptions: ViewportOptions])
Viewport 根据提供的地理区域或坐标获得最佳的地图视野，返回的对象中包含center和zoom属性，分别表示地图的中心点和级别。此方法仅返回视野信息，不会将新的中心点和级别做用到当前地图上。(自 1.1 新增)
Number 返回地图当前缩放级别。
方法返回值描述
centerAndZoom(center:Point, zoom:Number)
none设初始化地图。
如果center类型为Point时，zoom必须赋值，赋值范围为3-19级，若调用高清底图（针对移动端开发）时，zoom赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别。
panTo(center:Point[, opts:PanOptions])
none 将地图的中心点更改为给定的点。如果该点在当前的地图视图中已经可见，则会以平滑动画的方式移动到中心点位置。可以通过配置强制移动过程不使用动画效果。
panBy(x:Number, y:Number[, opts: PanOptions])
none 将地图在水平位置上移动x像素，垂直位置上移动y像素。如果指定的像素大于可视区域范围或者在配置中指定没有动画效果，则不执行滑动效果。
none 重新设置地图，恢复地图初始化时的中心点和级别。
setCenter(center:Point|String)
none 设置地图中心点。center除了可以为坐标点以外，还支持城市名。注：使用城市名进行设置时该方法是异步执行，使用坐标点设置时该方法不是异步执行。
setCurrentCity(city:String)
none 设置地图城市，注意当地图初始化时的类型设置为BMAP_PERSPECTIVE_MAP时，需要在调用centerAndZoom之前调用此方法设置地图所在城市。例如：
var map = new BMap.Map(“container”, {mapType: BMAP_PERSPECTIVE_MAP});
map.setCurrentCity(“北京市”);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 18);
注意：初始化的坐标应与您设置的城市对应，否则地图将无法正常显示。如果地图初始化为BMAP_NORMAL_MAP类型，则在调用setMapType切换地图类型时也要调用此方法。(自 1.1 新增)
setMapType(mapType:MapTypes)
none 设置地图类型。注意，当设置地图类型为BMAP_PERSPECTIVE_MAP时，需要调用map.setCurrentCity方法设置城市。(自 1.1 新增)
setViewport(view:Array&Point&|Viewport[, viewportOptions: ViewportOptions])
none 根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标。(自 1.1 新增)
zoomTo(zoom:Number)
（自1.2废弃）
setZoom(zoom:Number)
none 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增）
highResolutionEnabled()
Boolean是否使用高分辨率底图。仅当mapOptions.enableHighResolution属性为true且设备支持高分辨率时返回true。
none 放大一级视图。
none 缩小一级视图。
addHotspot(hotspot:Hotspot)
none 为地图添加热区。(自 1.2 新增)
removeHotspot(hotspot:Hotspot)
none 移除某个地图热区。(自 1.2 新增)
clearHotspots()
none 清空地图所有热区。(自 1.2 新增)
方法返回值描述
addControl(control:Control)
none 将控件添加到地图，一个控件实例只能向地图中添加一次。
removeControl(control:Control)
none从地图中移除控件。如果控件从未被添加到地图中，则该移除不起任何作用。
getContainer()
HTMLElement 返回地图的容器元素。当创建用户自定义控件时，需要自行实现Control.initialize()方法，并将控件的容器元素添加到地图上，通过此方法可获得地图容器。
方法返回值描述
addContextMenu(menu:ContextMenu)
none 添加右键菜单。
removeContextMenu(menu:ContextMenu)
none 移除右键菜单。
方法返回值描述
addOverlay(overlay:Overlay)
none 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次。
removeOverlay(overlay:Overlay)
none 从地图中移除覆盖物。如果覆盖物从未被添加到地图中，则该移除不起任何作用。
clearOverlays()
none 清除地图上所有覆盖物。
openInfoWindow(infoWnd:InfoWindow, point:Point)
none 在地图上打开信息窗口。
closeInfoWindow()
none 关闭在地图上打开的信息窗口。在标注上打开的信息窗口也可通过此方法进行关闭。
pointToOverlayPixel(point:Point)
Pixel 根据地理坐标获取对应的覆盖物容器的坐标，此方法用于自定义覆盖物。(自 1.1 新增)
overlayPixelToPoint(pixel:Pixel)
Point 根据覆盖物容器的坐标获取对应的地理坐标。(自 1.1 新增)
getInfoWindow()
InfoWindow|Null返回地图上处于打开状态的信息窗的实例。当地图没有打开的信息窗口时，此方法返回null。(自 1.1 新增)
getOverlays()
Array&Overlay&返回地图上的所有覆盖物。(自 1.1 新增)
getPanes()
MapPanes返回地图覆盖物容器列表。(自 1.1 新增)
方法返回值描述
addTileLayer(tileLayer:TileLayer)
none 添加一个自定义地图图层。
removeTileLayer(tilelayer:TileLayer)
none 移除一个自定义地图图层。
getTileLayer(mapType:String)
TileLayer通过地图类型得到一个地图图层对象。
方法返回值描述
pixelToPoint(pixel:Pixel)
Point 像素坐标转换为经纬度坐标。
pointToPixel(point:Point)
Pixel 经纬度坐标转换为像素坐标。
事件参数描述
{type, target, point, pixel, overlay}左键单击地图时触发此事件。
当双击时，产生的事件序列为：
click click dblclick
(自 1.1 更新)
{type, target, pixel, point}鼠标双击地图时会触发此事件。
rightclick
{type, target, point, pixel, overlay}右键单击地图时触发此事件。
当双击时，产生的事件序列为：
rightclick rightclick rightdblclick
(自 1.1 更新)
rightdblclick
{type, target, point, pixel, overlay}右键双击地图时触发此事件。
(自 1.1 新增)
maptypechange
{type, target}地图类型发生变化时触发此事件。
(自 1.1 新增)
{type, target, point, pixel, overlay}鼠标在地图区域移动过程中触发此事件。
(自 1.1 新增)
{type, target}鼠标移入地图区域时触发此事件。
(自 1.2 新增)
{type, target}鼠标移出地图区域时触发此事件。
(自 1.2 新增)
{type, target}地图移动开始时触发此事件。
{type, target}地图移动过程中触发此事件。
{type, target}地图移动结束时触发此事件。
{type, target}地图更改缩放级别开始时触发触发此事件。
{type, target}地图更改缩放级别结束时触发触发此事件。
addoverlay
{type, target}当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件。
addcontrol
{type, target}当使用Map.addControl()方法向地图中添加单个控件时会触发此事件。
removecontrol
{type, target}当使用Map.removeControl()方法移除单个控件时会触发此事件。
removeoverlay
{type, target}当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件。
clearoverlays
{type, target}当使用Map.clearOverlays()方法一次性移除全部覆盖物时会触发此事件。
{type, target, pixel, point}开始拖拽地图时触发。
{type, target, pixel, point}拖拽地图过程中触发。
{type, target, pixel, point}停止拖拽地图时触发。
addtilelayer
{type, target}添加一个自定义地图图层时触发此事件。
removetilelayer
{type, target}移除一个自定义地图图层时触发此事件。
{type, target, pixel, point, zoom}调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块。
{type, target, size}地图可视区域大小发生变化时会触发此事件。
hotspotclick
{type, target, hotspots}点击热区时触发此事件。(自 1.2 新增)
hotspotover
{type, target, hotspots}鼠标移至热区时触发此事件。(自 1.2 新增)
hotspotout
{type, target, hotspots}鼠标移出热区时触发此事件。(自 1.2 新增)
tilesloaded
{type, target}当地图所有图块完成加载时触发此事件。(自 1.2 新增)
touchstart
{type, target, point,pixel}触摸开始时触发此事件，仅适用移动设备。(自 1.5新增)
{type, target, point,pixel}触摸移动时触发此事件，仅适用移动设备。(自 1.5新增)
{type, target, point,pixel}触摸结束时触发此事件，仅适用移动设备。(自 1.5新增)
{type, target, point,pixel}长按事件，仅适用移动设备。(自 1.5新增)
Android开发&&&&&&&&&&&&&&&&&&
posts - 84,comments - 3,trackbacks - 0
百度地图API
开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心:&&&
1.&&html&&&
2.&&head&&&
3.&&meta&http-equiv="Content-Type"&content="text/&charset=utf-8"&/&&&
4.&&title&Hello,&World&/title&&&
5.&&script&type="text/javascript"&src="http://api./api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"&&/script&&&
6.&&/head&&&
7.&&body&&&
8.&&div&style="width:520height:340border:1px&solid&gray"&id="container"&&/div&&&
9.&&/body&&&
10.&&/html&&&
12.&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&meta&http-equiv="Content-Type"&content="text/&charset=utf-8"&/&
&title&Hello,&World&/title&
&script&type="text/javascript"&src="http://api./api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"&&/script&
&div&style="width:520height:340border:1px&solid&gray"&id="container"&&/div&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
1.&&script&type="text/javascript"&&&&
2.&var&map&=&new&BMap.Map("container");&&&&&&&&&&//&创建地图实例&&&
3.&var&point&=&new&BMap.Point(116.404,&39.915);&&//&创建点坐标&&&
4.&map.centerAndZoom(point,&15);&&&&&&&&&&&&&&&&&//&初始化地图，设置中心点坐标和地图级别&&&
5.&&/script&&&&
6.&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&script&type="text/javascript"&
var&map&=&new&BMap.Map("container");&&&&&&&&&&//&创建地图实例
var&point&=&new&BMap.Point(116.404,&39.915);&&//&创建点坐标
map.centerAndZoom(point,&15);&&&&&&&&&&&&&&&&&//&初始化地图，设置中心点坐标和地图级别
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
引用百度地图API文件
当您引用地图API文件时，需要使用自己申请的API密钥。
1.&&script&type="text/javascript"&src="http://api./api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"&&/script&&&
&script&type="text/javascript"&src="http://api./api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"&&/script&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
创建地图容器元素
1.&&div&style="width:520height:340border:1px&solid&#000"&id="container"&&/div&&&
&div&style="width:520height:340border:1px&solid&#000"&id="container"&&/div&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素并制定它的大小。地图会根据容器大小调整自身尺寸。
API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。
创建地图实例
1.&var&map&=&new&BMap.Map("container");&
var&map&=&new&BMap.Map("container");
&&&&&&&&&&&&
位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。注意在调用此构造函数时应确保容器元素已经添加到地图上。&
创建点坐标
1.&var&point&=&new&BMap.Point(116.404,&39.915);&
var&point&=&new&BMap.Point(116.404,&39.915);
&&&&&&&&&&&&
这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。
地图初始化
1.&map.centerAndZoom(point,15);&&&
map.centerAndZoom(point,15);
&&&&&&&&&&&&
在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。
地图被实例化并完成初始化以后，就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。&
您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。&
下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。&
1.&var&map&=&new&BMap.Map("container");&&&
2.&var&point&=&new&BMap.Point(116.404,&39.915);&&&
3.&map.centerAndZoom(point,&15);&&&
4.&window.setTimeout(function(){&&&
5.&&map.panTo(new&BMap.Point(116.409,&39.918));&&&
6.&},&2000);&&&
var&map&=&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));
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
地图控件概述&
百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，您还可以通过BMap.Control来实现自定义控件。&
地图API中提供的控件有：
·&Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。&
·&NavigationControl：地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。&
·&OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。&
·&ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。&
·&CopyrightControl：版权控件，默认位于地图左下方。&
所有这些控件都基于BMap.Control类。
向地图添加控件
可以使用BMap.Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&
3.&map.addControl(new&BMap.NavigationControl());&&
var&map&=&new&BMap.Map("container");
map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);
map.addControl(new&BMap.NavigationControl());
可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。
1.&map.addControl(new&BMap.NavigationControl());&&&
2.&map.addControl(new&BMap.ScaleControl());&&&
3.&map.addControl(new&BMap.OverviewMapControl());&&
map.addControl(new&BMap.NavigationControl());
map.addControl(new&BMap.ScaleControl());
map.addControl(new&BMap.OverviewMapControl());
控制控件的位置&
初始化控件时，可提供一个可选参数，参数类型为一个JavaScript对象。其中anchor和offsetX、offsetY共同控制控件在地图上的位置。anchor表示控件停靠在地图的哪个角，允许的值为：&
·&BMAP_ANCHOR_TOP_LEFT&
·&BMAP_ANCHOR_TOP_RIGHT&
·&BMAP_ANCHOR_BOTTOM_LEFT&
·&BMAP_ANCHOR_BOTTOM_RIGHT&
除了指定停靠位置外，还可以提供偏移量，用来指示控件距离地图边界相隔多少像素。&
本示例将标准地图控件放置在地图的右上角，间隔10个像素。&
1.&var&opts&=&{anchor:&BMAP_ANCHOR_TOP_RIGHT,&offset:&new&BMap.Size(10,&10)}&&&
2.&map.addControl(new&BMap.NavigationControl(opts));&&
var&opts&=&{anchor:&BMAP_ANCHOR_TOP_RIGHT,&offset:&new&BMap.Size(10,&10)}
map.addControl(new&BMap.NavigationControl(opts));
修改控件的配置
地图API的控件提供了丰富的配置参数，您可参考API文档来修改它们以便得到符合要求的控件外观。&
本示例将调整平移缩放地图控件的外观。&
1.&var&opts&=&{type:&BMAP_NAVIGATION_CONTROL_SMALL}&&&
2.&map.addControl(new&BMap.NavigationControl(opts));&&
var&opts&=&{type:&BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl(new&BMap.NavigationControl(opts));
自定义控件
百度地图API允许您通过继承BMap.Control来创建自定义地图控件。（注意JavaScript是通过prototype属性进行继承的）&
要创建可用的自定义控件，您需要实现类定义中的一个抽象方法并给两个属性赋值，它们是：initialize()和defaultAnchor、defaultOffset。initialize()方法必须返回控件容器的DOM元素，defaultAnchor为控件默认的停靠位置，defaultOffset为控件默认的间隔距离。&
所有自定义的地图控件中的DOM元素最终都应该添加到地图容器（即地图所在的DOM元素）中去，这个地图容器可以通过BMap.Map.getContainer()方法获得。
在此示例中，创建一个简单的放大控件，每一次点击将地图放大两个级别。它具有文本标识，而不是平移缩放控件中使用的图形图标。
1.&//&定义一个控件类，即function&&&
2.&function&ZoomControl(){&&&
3.&&&//&设置默认停靠位置和偏移量&&&
4.&&&this.defaultAnchor&=&BMAP_ANCHOR_TOP_LEFT;&&&
5.&&&this.defaultOffset&=&new&BMap.Size(10,&10);&&&
7.&//&通过JavaScript的prototype属性继承于BMap.Control&&&
8.&ZoomControl.prototype&=&new&BMap.Control();&&&&&
9.&//&自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回&&&
10.&//&在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中&&&
11.&ZoomControl.prototype.initialize&=&function(map){&&&
12.&&&//&创建一个DOM元素&&&
13.&&&var&div&=&document.createElement("div");&&&
14.&&&//&添加文字说明&&&
15.&&&div.appendChild(document.createTextNode("放大2级"));&&&
16.&&&//&设置样式&&&
17.&&&div.style.cursor&=&"pointer";&&&
18.&&&div.style.border&=&"1px&solid&gray";&&&
19.&&&div.style.backgroundColor&=&"white";&&&
20.&&&//&绑定事件，点击一次放大两级&&&
21.&&&div.onclick&=&function(e){&&&
22.&&&&&map.zoomTo(map.getZoom()&+&2);&&&
23.&&&}&&&
24.&&&//&添加DOM元素到地图中&&&
25.&&&map.getContainer().appendChild(div);&&&
26.&&&//&将DOM元素返回&&&
27.&&&return&&&&
28.&}&&&&&
29.&//&创建控件&&&
30.&var&myZoomCtrl&=&new&ZoomControl();&&&
31.&//&添加到地图当中&&&
32.&map.addControl(myZoomCtrl);&&
地图覆盖物概述
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。&
地图API提供了如下几种覆盖物：&
·&Overlay：覆盖物的抽象基类，此类不可实例化，所有的覆盖物均继承此类的方法。&
·&Marker：标注表示地图上的点，可自定义标注的图标。&
·&Label：表示地图上的文本标注，您可以自定义标注的文本内容。&
·&Polyline：表示地图上的折线。&
·&Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。&
·&InfoWindow：信息窗口也是一种特殊的覆盖物。注意：同一时刻只能有一个信息窗口在地图上打开。&
可以使用BMap.Map.addOverlay()方法向地图添加覆盖物，使用BMap.Map.removeOverlay()方法移除覆盖物，注意此方法不适用于InfoWindow。&
标注表示地图上的点。API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。BMap.Marker的构造函数的参数为BMap.Point和BMap.MarkerOptions（可选）。&注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置。
下面的示例向地图中心点添加了一个标注，并使用默认的标注样式。
1.&var&map&=&new&BMap.Map("container");&&&
2.&var&point&=&new&BMap.Point(116.404,&39.915);&&&
3.&map.centerAndZoom(point,&15);&&&
4.&var&marker&=&new&BMap.Marker(point);&&&&&&&&//&创建标注&&&
5.&map.addOverlay(marker);&&&&&&&&&&&&&&&&&&&&&//&将标注添加到地图中&&
var&map&=&new&BMap.Map("container");
var&point&=&new&BMap.Point(116.404,&39.915);
map.centerAndZoom(point,&15);
var&marker&=&new&BMap.Marker(point);&&&&&&&&//&创建标注
map.addOverlay(marker);&&&&&&&&&&&&&&&&&&&&&//&将标注添加到地图中
定义标注图标
通过BMap.Icon类可实现自定义标注的图标，下面示例通过参数BMap.MarkerOptions的icon属性进行设置，您也可以使用BMap.Marker.setIcon()方法。
1.&var&map&=&new&BMap.Map("container");&&&
2.&var&point&=&new&BMap.Point(116.404,&39.915);&&&
3.&map.centerAndZoom(point,&15);&&&&&
4.&//&编写自定义函数，创建标注&&&
5.&function&addMarker(point,&index){&&&
6.&&&//&创建图标对象&&&
7.&&&var&myIcon&=&new&BMap.Icon("http://api./img/markers.png",&new&BMap.Size(23,&25),&{&&&
8.&&&&&offset:&new&BMap.Size(10,&25),&&&&&&&&&&&&&&&&&&//&指定定位位置&&&
9.&&&&&imageOffset:&new&BMap.Size(0,&0&-&index&*&25)&&&//&设置图片偏移&&&
10.&&&});&&&
11.&&&var&marker&=&new&BMap.Marker(point,&{icon:&myIcon});&&&
12.&&&map.addOverlay(marker);&&&
13.&}&&&&&
14.&//&随机向地图添加10个标注&&&
15.&var&bounds&=&map.getBounds();&&&
16.&var&lngSpan&=&bounds.maxX&-&bounds.minX;&&&
17.&var&latSpan&=&bounds.maxY&-&bounds.minY;&&&
18.&for&(var&i&=&0;&i&&&10;&i&++)&{&&&
19.&&&var&point&=&new&BMap.Point(bounds.minX&+&lngSpan&*&(Math.random()&*&0.7&+&0.15),&&&
20.&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&bounds.minY&+&latSpan&*&(Math.random()&*&0.7&+&0.15));&&&
21.&&&addMarker(point,&i);&&&
var&map&=&new&BMap.Map("container");
var&point&=&new&BMap.Point(116.404,&39.915);
map.centerAndZoom(point,&15);
//&编写自定义函数，创建标注
function&addMarker(point,&index){
&&//&创建图标对象
&&var&myIcon&=&new&BMap.Icon("http://api./img/markers.png",&new&BMap.Size(23,&25),&{
&&&&offset:&new&BMap.Size(10,&25),&&&&&&&&&&&&&&&&&&//&指定定位位置
&&&&imageOffset:&new&BMap.Size(0,&0&-&index&*&25)&&&//&设置图片偏移
&&var&marker&=&new&BMap.Marker(point,&{icon:&myIcon});
&&map.addOverlay(marker);
//&随机向地图添加10个标注
var&bounds&=&map.getBounds();
var&lngSpan&=&bounds.maxX&-&bounds.minX;
var&latSpan&=&bounds.maxY&-&bounds.minY;
for&(var&i&=&0;&i&&&10;&i&++)&{
&&var&point&=&new&BMap.Point(bounds.minX&+&lngSpan&*&(Math.random()&*&0.7&+&0.15),
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&bounds.minY&+&latSpan&*&(Math.random()&*&0.7&+&0.15));
&&addMarker(point,&i);
监听标注的事件
事件方法与Map事件机制相同。可参考部分。&
1.&marker.addEventListener("click",&function(){&&&
2.&&&alert("您点击了标注");&&&
marker.addEventListener("click",&function(){
&&alert("您点击了标注");
如果您在地图中需要反复添加大量的标注，这可能会占用较多的内存资源。如果您的标注在被移除后不再使用，可调用Overlay.dispose()方法来释放内存。注意在调用此方法后标注将不能再次添加到地图上。关于Overlay.dispose()的详细信息可参考部分内容。
例如，您可以在标注被移除后调用此方法：
1.&map.removeOverlay(marker);&&&
2.&marker.dispose();&&&
map.removeOverlay(marker);
marker.dispose();
&&&&&&&&&&&&&&
信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。&可以使用Window来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态。&
1.&var&opts&=&{&&&
2.&&&width&:&250,&&&&&//&信息窗口宽度&&&
3.&&&height:&100,&&&&&//&信息窗口高度&&&
4.&&&title&:&"Hello"&&//&信息窗口标题&&&
6.&var&infoWindow&=&new&Window("World",&opts);&&//&创建信息窗口对象&&&
7.&map.openInfoWindow(infoWindow,&map.getCenter());&&&&&&//&打开信息窗口&&
var&opts&=&{
&&width&:&250,&&&&&//&信息窗口宽度
&&height:&100,&&&&&//&信息窗口高度
&&title&:&"Hello"&&//&信息窗口标题
var&infoWindow&=&new&Window("World",&opts);&&//&创建信息窗口对象
map.openInfoWindow(infoWindow,&map.getCenter());&&&&&&//&打开信息窗口
BMap.Polyline对象表示地图上的折线覆盖物。它包含一组点，并将这些点连接起来形成折线。&
折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）。&
BMap.Polyline对象需要浏览器支持矢量绘制功能。在Internet&Explorer中，地图使用VML（请参阅VML）绘制折线；在其他浏览器中使用SVG（如果可用）。&
以下代码段会在两点之间创建6像素宽的蓝色折线：&
1.&var&polyline&=&new&BMap.Polyline([&&&
2.&&&&&new&BMap.Point(116.399,&39.910),&&&
3.&&&&&new&BMap.Point(116.405,&39.920)&&&
4.&&&],&&&
5.&&&{strokeColor:"blue",&strokeWeight:6,&strokeOpacity:0.5}&&&
7.&map.addOverlay(polyline);&&
地图事件概述&
浏览器中的JavaScript是“事件驱动的”，这表示JavaScript通过生成事件来响应交互，并期望程序能够“监听”感兴趣的活动。例如，在浏览器中，用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器，并在接收这些事件时执行代码。&
百度地图API拥有一个自己的事件模型，程序员可监听地图API对象的自定义事件，使用方法和DOM事件类似。但请注意，地图API事件是独立的，与标准DOM事件不同。&
事件的监听&
百度地图API中的每一个对象都含有addEventListener方法，您可以通过该方法来监听对象事件。例如，BMap.Map包含click、dblclick等事件。在特定环境下这些事件会被触发，同时监听函数会得到相应的事件参数e，比如当用户点击地图时，e参数会包含鼠标所对应的地理位置point。
有关地图API对象的事件，请参考完整的API参考文档。&
addEventListener方法有两个参数：监听的事件名称和事件触发时调用的函数。下面示例中，每当用户点击地图时，会弹出一个警告框。&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&
3.&map.addEventListener("click",&function(){&&&
4.&&&alert("您点击了地图。");&&&
var&map&=&new&BMap.Map("container");
map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);
map.addEventListener("click",&function(){
&&alert("您点击了地图。");
&&&&&&&&&&&&
通过监听事件还可以捕获事件触发后的状态。下面示例显示用户拖动地图后地图中心的经纬度信息。
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&
3.&map.addEventListener("dragend",&function(){&&&
4.&&&var&center&=&map.getCenter();&&&
5.&&&document.getElementById("info").innerHTML&=&center.lng&+&",&"&+&center.&&&
var&map&=&new&BMap.Map("container");
map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);
map.addEventListener("dragend",&function(){
&&var&center&=&map.getCenter();
&&document.getElementById("info").innerHTML&=&center.lng&+&",&"&+&center.
&&&&&&&&&&&&
事件参数和this
在标准的DOM事件模型中（DOM&Level&2&Events），监听函数会得到一个事件对象e，在e中可以获取有关该事件的信息。同时在监听函数中this会指向触发该事件的DOM元素。&百度地图API的事件模型与此类似，在事件监听函数中传递事件对象e，每个e参数至少包含事件类型（type）和触发该事件的对象（target）。&API还保证函数内的this指向触发（同时也是绑定）事件的API对象。&
例如，通过参数e得到点击的经纬度坐标。&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&
3.&map.addEventListener("click",&function(e){&&&
4.&&&document.getElementById("info").innerHTML&=&e.point.lng&+&",&"&+&e.point.&&&
var&map&=&new&BMap.Map("container");
map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);
map.addEventListener("click",&function(e){
&&document.getElementById("info").innerHTML&=&e.point.lng&+&",&"&+&e.point.
&&&&&&&&&&&&
或者通过this得到地图缩放后的级别。&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&
3.&map.addEventListener("zoomend",&function(){&&&
4.&&&document.getElementById("info").innerHTML&=&"地图缩放至："&+&this.getZoom()&+&"级";&&&
移除监听事件
当您不再希望监听事件时，可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。&
下面示例中，用户第一次点击地图会触发事件监听函数，在函数内部对事件监听进行了移除，因此后续的点击操作则不会触发监听函数。&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&&&
3.&function&showInfo(e){&&&
4.&&&document.getElementById("info").innerHTML&=&e.point.lng&+&",&"&+&e.point.&&&
5.&&&map.removeEventListener("click",&showInfo);&&&
7.&map.addEventListener("click",&showInfo);&&&
地图图层概念
地图可以包含一个或多个图层，每个图层在每个级别都是由若干张图块组成的，它们覆盖了地球的整个表面。
在最低的缩放级别（级别&1）中，整个地球由&4&张图块组成。随着级别的增长，地图所使用的图块个数也随之增多。
自定义图层&
百度地图中提供一个BMap.TileLayer类，可以实现用户自定义图层功能。可以在百度地图上叠加一层自定义的图块。
有关TileLayer类的详细接口，请参考TileLayer的。&
以下代码在每个图块的所有缩放级别上显示一个简单的透明叠加层，使用浮动红色小水滴表示图块的轮廓。
1.&var&map&=&new&BMap.Map("container");&&&&&&&&&&//&创建地图实例&&&
2.&var&point&=&new&BMap.Point(116.404,&39.915);&&//&创建点坐标&&&
3.&map.centerAndZoom(point,15);&&&&&&&&&&&&&&&&&&//&初始化地图，设置中心点坐标和地图级别&&&
4.&var&tilelayer&=&new&BMap.TileLayer();&&&&&&&&&//&创建地图层实例&&&
5.&tilelayer.getTilesUrl=function(){&&&&&&&&&&&&&//&设置图块路径&&&
6.&&&return&"layer.gif";&&&
8.&map.addTileLayer(tilelayer);&&&&&&&&&&&&&&&&&&//&将图层添加到地图上&&&
地图工具概述&
百度地图提供了交互功能更为复杂的“工具”，它包括：
·&PushpinTool：标注工具。通过此工具用户可在地图任意区域添加标注。&
·&DistanceTool：测距工具。通过此工具用户可测量地图上任意位置之间的距离。&
·&DragAndZoomTool：区域缩放工具。此工具将根据用户拖拽绘制的矩形区域大小对地图进行放大或缩小操作。&
工具类在初始化时需要提供地图实例参数，以便使工具在该地图上生效。您可以在地图上添加多个工具，但同一时刻只能有一个工具处于开启状态。标注工具和测距工具在完成一次操作后将自动退出开启状态，而区域缩放工具可以自行配置是否自动关闭。
向地图添加工具
在地图正确初始化后，您可以创建工具实例。下面示例展示了如何向地图添加一个标注工具。
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&15);&&&
3.&var&myPushpin&=&new&BMap.PushpinTool(map);&&&&&&&&&&//&创建标注工具实例&&&
4.&myPushpin.addEventListener("markend",&function(e){&&//&监听事件，提示标注点坐标信息&&&
5.&&&alert("您标注的位置："&+&&&&
6.&&&&&&&&&e.marker.getPoint().lng&+&",&"&+&&&&
7.&&&&&&&&&e.marker.getPoint().lat);&&&
9.&myPushpin.open();&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//&开启标注工具&
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.getPoint().lng&+&",&"&+&
&&&&&&&&e.marker.getPoint().lat);
myPushpin.open();&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//&开启标注工具
&&&&&&&&&&&&
通过按钮控制工具的开启和关闭
工具类没有提供控制其开启和关闭的UI元素。您可以根据需要自己创建这些元素，把它们放置在地图区域内或者区域外均可。调用工具类的open和close可控制工具的开启和关闭。
首先初始化地图并创建一个测距工具实例：
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&15);&&&
3.&var&myDis&=&new&BMap.DistanceTool(map);&&
var&map&=&new&BMap.Map("container");
map.centerAndZoom(new&BMap.Point(116.404,&39.915),&15);
var&myDis&=&new&BMap.DistanceTool(map);
&&&&&&&&&&&&
接着我们创建两个按钮元素并为其添加点击事件。
1.&&input&type="button"&value="开启"&onclick="myDis.open()"&/&&&
2.&&input&type="button"&value="关闭"&onclick="myDis.close()"&/&&&
修改工具的配置
一些工具类提供了可修改的配置参数，您可参考API文档来修改它们以便符合您的要求。
本示例为区域缩放工具添加提示文字。
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&15);&&&
3.&var&myDrag&=&new&BMap.DragAndZoomTool(map,&{&&&
4.&&&followText&:&"拖拽鼠标进行操作"&&
地图服务概述
地图服务是指那些提供数据信息的接口，比如本地搜索、路线规划等等。百度地图API提供的服务有：&
·&LocalSearch：本地搜索，提供某一特定地区的位置搜索服务，比如在北京市搜索“公园”。&
·&TransitRoute：公交导航，提供某一特定地区的公交出行方案的搜索服务。&
·&DrivingRoute：驾车导航，提供驾车出行方案的搜索服务。&
·&WalkingRoute：步行导航，提供步行出行方案的搜索服务。&
·&Geocoder：地址解析，提供将地址信息转换为坐标点信息的服务。&
·&LocalCity：本地城市，提供自动判断您所在城市的服务。&
·&TrafficControl：实时路况控件，提供实时和历史路况信息服务。&
搜索类的服务接口需要指定一个搜索范围，否则接口将不能工作。
BMap.LocalSearch提供本地搜索服务，在使用本地搜索时需要为其设置一个检索区域，检索区域可以是BMap.Map对象、BMap.Point对象或者是省市名称（比如："北京市"）的字符串。BMap.LocalSearch构造函数的第二个参数是可选的，您可以在其中指定结果的呈现。BMap.RenderOptions类提供了若干控制呈现的属性，其中map指定了结果所展现的地图实例，panel指定了结果列表的容器元素。&
下面这个示例展示了在北京市检索天安门。搜索区域设置为地图实例，并告知结果需要展现在地图实例上。
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&
3.&var&local&=&new&BMap.LocalSearch(map,&{&&&
4.&&&renderOptions:{map:&map}&&&
6.&local.search("天安门");&
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}
local.search("天安门");
&&&&&&&&&&&&
另外，BMap.LocalSearch还提包含searchNearby和searchInBounds方法，为您提供周边搜索和范围搜索服务。&
BMap.LocalSearch提供了若干配置方法，通过它们可以自定义搜索服务的行为以满足您的需求。&
在下面的示例中，我们调整每页显示8个结果，并且根据结果点位置自动调整地图视野，不显示第一条结果的信息窗口：
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&&&
3.&var&local&=&new&BMap.LocalSearch("北京市",&{&&&
4.&&&renderOptions:&{&&&
5.&&&&&map:&map,&&&
6.&&&&&pageCapacity:&8,&&&
7.&&&&&autoViewport:&true,&&&
8.&&&&&selectFirstResult:&false&&
10.&});&&&
11.&local.search("中关村");&&&&&&&&&&&&&&&&&
var&map&=&new&BMap.Map("container");
map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);
var&local&=&new&BMap.LocalSearch("北京市",&{
&&renderOptions:&{
&&&&map:&map,
&&&&pageCapacity:&8,
&&&&autoViewport:&true,
&&&&selectFirstResult:&false
local.search("中关村");
&&&&&&&&&&&&
通过设置BMap.LocalSearchOptions.renderOptions.panel属性，可以为本地搜索对象提供一个结果列表容器，搜索结果会自动添加到容器元素中。请看下面示例：
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&
3.&var&local&=&new&BMap.LocalSearch(map,&{&&&
4.&&&renderOptions:&{map:&map,&panel:&"results"}&&&
6.&local.search("天安门");&&&
除了搜索结果会自动添加到地图和列表外，您还可以通过数据接口获得详细的数据信息，结合地图API您可以自行向地图添加标注和信息窗口。BMap.LocalSearch和BMap.LocalSearchOptions类提供了若干设置回调函数的接口，通过它们可得到搜索结果的数据信息。&例如，通过onSearchComplete回调函数参数可以获得BMap.LocalResult对象实例，它包含了每一次搜索结果的数据信息。&当回调函数被执行时，您可以使用BMap.LocalSearch.getStatus()方法来确认搜索是否成功或者得到错误的详细信息。&
在下面这个示例中，通过onSearchComplete回调函数得到第一页每条结果的标题和地址信息，并输出到页面上：&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&&&
3.&var&options&=&{&&&
4.&&&onSearchComplete:&function(results){&&&
5.&&&&&if&(local.getStatus()&==&BMAP_STATUS_SUCCESS){&&&
6.&&&&&&&//&判断状态是否正确&&&
7.&&&&&&&var&s&=&[];&&&
8.&&&&&&&for&(var&i&=&0;&i&&&results.getCurrentNumPois();&i&++){&&&
9.&&&&&&&&&s.push(results.getPoi(i).title&+&",&"&+&results.getPoi(i).address);&&&
10.&&&&&&&}&&&
11.&&&&&&&document.getElementById("log").innerHTML&=&s.join("&BR&");&&&
12.&&&&&}&&&
13.&&&}&&&
15.&var&local&=&new&BMap.LocalSearch(map,&options);&&&
16.&local.search("公园");&&&
通过周边搜索服务，您可以在某个地点附近进行搜索，也可以在某一个特定结果点周围进行搜索。&
下面示例展示如何在前门附近搜索小吃：&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&&&
3.&var&local&=&new&BMap.LocalSearch(map,&{&&&
4.&&&renderOptions:{map:&map,&autoViewport:&true}&&&
6.&local.searchNearby("小吃",&"前门");&&&
范围搜索将根据您提供的视野范围提供搜索结果。注意：当搜索范围过大时可能会出现无结果的情况。
下面示例展示在当前地图视野范围内搜索银行：
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&14);&&&
4.&var&local&=&new&BMap.LocalSearch(map,&{&&&
5.&&&renderOptions:{map:&map}&&&
7.&local.searchInBounds("银行",&map.getBounds());&&&
BMap.TransitRoute类提供公交导航搜索服务。和本地搜索类似，在搜索之前需要指定搜索区域，注意公交导航的区域范围只能是市，而不能是省。如果搜索区域为BMap.Map对象，路线结果会自动添加到地图上。如果您提供了结果容器，相应的路线描述也会展示在页面上。&
下面示例展示了如何使用公交导航服务：&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&14);&&&&&
3.&var&transit&=&new&BMap.TransitRoute(map,&{&&&
4.&&&renderOptions:&{map:&map}&&&
6.&transit.search("王府井",&"西单");&&&
您可以提供用于展示文字结果的容器元素，方案结果会自动在页面中展现：
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&14);&&&
4.&var&transit&=&new&BMap.TransitRoute(map,&{&&&
5.&&&renderOptions:&{map:&map,&panel:&"results"}&&&
7.&transit.search("王府井",&"西单");&&&
您可通过数据接口获取详细的公交方案信息。公交导航搜索结果用BMap.TransitRouteResult来表示，其中包含了若干公交出行方案（BMap.TransitRoutePlan）。每条出行方案由步行线路和公交线路组成。&在起点到上车点之间、下车点到终点之间以及每个换乘站之间都会存在步行线路，如果上述的某两点位置重合，那么其间的步行路线长度为0。&
在下面示例中，通过数据接口将第一条方案的路线添加到地图上，并将所有方案的描述信息输出到页面上&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&12);&&&
4.&var&transit&=&new&BMap.TransitRoute("北京市");&&&
5.&transit.setSearchCompleteCallback(function(results){&&&
6.&&&if&(transit.getStatus()&==&BMAP_STATUS_SUCCESS){&&&
7.&&&&&var&firstPlan&=&results.getPlan(0);&&&
8.&&&&&//&绘制步行线路&&&
9.&&&&&for&(var&i&=&0;&i&&&firstPlan.getNumRoutes();&i&++){&&&
10.&&&&&&&var&walk&=&firstPlan.getRoute(i);&&&
11.&&&&&&&if&(walk.getDistance(false)&&&0){&&&
12.&&&&&&&&&//&步行线路有可能为0&&&
13.&&&&&&&&&map.addOverlay(new&BMap.Polyline(walk.getPoints(),&{lineColor:&"green"}));&&&
14.&&&&&&&}&&&
15.&&&&&}&&&
16.&&&&&//&绘制公交线路&&&
17.&&&&&for&(i&=&0;&i&&&firstPlan.getNumLines();&i&++){&&&
18.&&&&&&&var&line&=&firstPlan.getLine(i);&&&
19.&&&&&&&map.addOverlay(new&BMap.Polyline(line.getPoints()));&&&
20.&&&&&}&&&
21.&&&&&//&输出方案信息&&&
22.&&&&&var&s&=&[];&&&
23.&&&&&for&(i&=&0;&i&&&results.getNumPlans();&i&++){&&&
24.&&&&&&&s.push((i&+&1)&+&".&"&+&results.getPlan(i).getDescription());&&&
25.&&&&&}&&&
26.&&&&&document.getElementById("log").innerHTML&=&s.join("&BR&");&&&
27.&&&}&&&
29.&transit.search("中关村",&"国贸桥");&&&
BMap.DrivingRoute提供驾车导航服务。与公交导航不同的是，驾车导航的搜索范围可以设置为省。&
下面示例展示了如何使用驾车导航接口：&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&14);&&&
4.&var&driving&=&new&BMap.DrivingRoute(map,&{&&&
5.&&&renderOptions:&{&&&
6.&&&&&map:&map,&&&
7.&&&&&autoViewport:&true&&
10.&driving.search("中关村",&"天安门");&&&
&结果面板&
下面示例中，我们提供了结果面板参数，方案描述会自动展示到页面上。&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&14);&&&
4.&var&driving&=&new&BMap.DrivingRoute(map,&{&&&
5.&&&renderOptions:&{&&&
6.&&&&&map&&&:&map,&&&&
7.&&&&&panel&:&"results",&&&
8.&&&&&autoViewport:&true&&
10.&});&&&
11.&driving.search("中关村",&"天安门");&&&
驾车导航服务提供了丰富的数据接口，通过onSearchComplete回调函数得到BMap.DrivingRouteResult对象，它包含了驾车导航结果数据信息。&结果会包含若干驾车方案（目前仅一条方案），每条方案中包含了若干驾车线路（如果导航方案只包含一个目的地，那么驾车线路的个数就为1，如果方案包含若干个目的地，则驾车线路的个数会大于1。目前API尚不支持多个目的地的驾车导航）。&每条驾车线路又会包含一系列的关键步骤（BMap.Step），关键步骤描述了具体驾车行驶方案，可通过BMap.Step.getDescription()方法获得。&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&14);&&&&&
3.&var&options&=&{&&&
4.&&&onSearchComplete:&function(results){&&&
5.&&&&&if&(driving.getStatus()&==&BMAP_STATUS_SUCCESS){&&&
6.&&&&&&&//&获取第一条方案&&&
7.&&&&&&&var&plan&=&results.getPlan(0);&&&&&
8.&&&&&&&//&获取方案的驾车线路&&&
9.&&&&&&&var&route&=&plan.getRoute(0);&&&&
10.&&&&&&&//&获取每个关键步骤，并输出到页面&&&
11.&&&&&&&var&s&=&[];&&&
12.&&&&&&&for&(var&i&=&0;&i&&&route.getNumSteps();&i&++){&&&
13.&&&&&&&&&var&step&=&route.getStep(i);&&&
14.&&&&&&&&&s.push((i&+&1)&+&".&"&+&step.getDescription());&&&
15.&&&&&&&}&&&
16.&&&&&&&document.getElementById("log").innerHTML&=&s.join("&BR&");&&&
17.&&&&&}&&&
18.&&&}&&&
20.&var&driving&=&new&BMap.DrivingRoute(map,&options);&&&
21.&driving.search("中关村",&"天安门");&&&
步行导航接口在使用上与驾车导航一致，具体请参考API文档。&
地址解析能够将地址信息转换为地理坐标点信息。
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&
3.&//&创建地址解析器实例&&&
4.&var&myGeo&=&new&BMap.Geocoder();&&&
5.&//&将地址解析结果显示在地图上，并调整地图视野&&&
6.&myGeo.getPoint("北京市海淀区上地10街10号",&function(point){&&&
7.&&&if&(point)&{&&&
8.&&&&&map.centerAndZoom(point,&16);&&&
9.&&&&&map.addOverlay(new&BMap.Marker(point));&&&
10.&&&}&&&
11.&},&"北京市");&&&
&实时路况&
实时路况以控件的形式供调用者使用，您仅需要实例化一个控件实例并添加到地图上即可。&
1.&var&map&=&new&BMap.Map("container");&&&
2.&map.centerAndZoom(new&BMap.Point(116.404,&39.915),&11);&&&
3.&//&添加实时路况控件&&&
4.&map.addControl(new&BMap.TrafficControl());&&&
//&定义一个控件类，即function
function&ZoomControl(){
&&//&设置默认停靠位置和偏移量
&&this.defaultAnchor&=&BMAP_ANCHOR_TOP_LEFT;
&&this.defaultOffset&=&new&BMap.Size(10,&10);
//&通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype&=&new&BMap.Control();
//&自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
//&在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
ZoomControl.prototype.initialize&=&function(map){
&&//&创建一个DOM元素
&&var&div&=&document.createElement("div");
&&//&添加文字说明
&&div.appendChild(document.createTextNode("放大2级"));
&&//&设置样式
&&div.style.cursor&=&"pointer";
&&div.style.border&=&"1px&solid&gray";
&&div.style.backgroundColor&=&"white";
&&//&绑定事件，点击一次放大两级
&&div.onclick&=&function(e){
&&&&map.zoomTo(map.getZoom()&+&2);
&&//&添加DOM元素到地图中
&&map.getContainer().appendChild(div);
&&//&将DOM元素返回
//&创建控件
var&myZoomCtrl&=&new&ZoomControl();
//&添加到地图当中
map.addControl(myZoomCtrl);
阅读(...) 评论()