怎么让百度地图调用标注什么是信息窗窗默认显示

首先de感谢百度提供免费API!~
我要說说什么是信息窗框InfoWindow的问题

1,什么是信息窗框的样式定制困难

  翻阅了整个API文档,想将白色的背景图片换成自己的貌似没辙

2,什麼是信息窗框的四个角的容器没有class

  对于想定制四个圆角的人来说相当蛋疼能否和头部div.top、中部div.center一样,加上四个角的class如左上.topL,右上.topR

3要是什么是信息窗框的显示方式用户可定制就好了。

  比如我可以加一些渐变显示或者渐变消失的动画效果google在这方面支持动画

1,圆角不要鼡img标签应该用背景图

  虽然我不是CSS大牛,但是这点很多CSS大牛都会支持的另一方面,如果用背景图用户可以方便换自己喜欢的背景圖

2,四个圆角和底部箭头的容器得加上相应的class。

3,用户可以定制什么是信息窗框的显示

  至少提供一个显示后的回调函数onShow啥的

开始学习百度地图API最简单的方式昰看一个简单的示例以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心:   

BMap.Polyline对象表示地图上的折线覆盖物。它包含一组点并將这些点连接起来形成折线。 

折线在地图上绘制为一系列直线段可以自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式(比如:#ff0000)或者是颜色关键字(比如:red) 

以下代码段会在两点之间创建6像素宽的蓝色折线: 

浏览器中的JavaScript是“事件驱动的”,这表示JavaScript通过生成事件来响应交互并期望程序能够“监听”感兴趣的活动。例如在浏览器中,用户的鼠标和键盘交互可以创建在DOM内传播的事件对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器,并在接收这些事件时执行代码 

百度地图API拥有一个自己的事件模型,程序员可監听地图API对象的自定义事件使用方法和DOM事件类似。但请注意地图API事件是独立的,与标准DOM事件不同 

百度地图API中的每一个对象都含有addEventListener方法,您可以通过该方法来监听对象事件例如,BMap.Map包含click、dblclick等事件在特定环境下这些事件会被触发,同时监听函数会得到相应的事件参数e仳如当用户点击地图时,e参数会包含鼠标所对应的地理位置point

有关地图API对象的事件,请参考完整的API参考文档 

addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。下面示例中每当用户点击地图时,会弹出一个警告框 

通过监听事件还可以捕获事件触发后的状态。丅面示例显示用户拖动地图后地图中心的经纬度什么是信息窗

在标准的DOM事件模型中(DOM Level 2 Events),监听函数会得到一个事件对象e在e中可以获取囿关该事件的什么是信息窗。同时在监听函数中this会指向触发该事件的DOM元素 百度地图API的事件模型与此类似,在事件监听函数中传递事件对潒e每个e参数至少包含事件类型(type)和触发该事件的对象(target)。 API还保证函数内的this指向触发(同时也是绑定)事件的API对象 

例如,通过参数e嘚到点击的经纬度坐标 

或者通过this得到地图缩放后的级别。 

当您不再希望监听事件时可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数 

下面示例中,用户第一次点击地图会触发事件监听函数在函数内部对事件监听进行了移除,因此后续的点击操作则不會触发监听函数 

地图可以包含一个或多个图层,每个图层在每个级别都是由若干张图块组成的它们覆盖了地球的整个表面。

在最低的縮放级别(级别 1)中整个地球由 4 张图块组成。随着级别的增长地图所使用的图块个数也随之增多。

百度地图中提供一个BMap.TileLayer类可以实现鼡户自定义图层功能。可以在百度地图上叠加一层自定义的图块

以下代码在每个图块的所有缩放级别上显示一个简单的透明叠加层,使鼡浮动红色小水滴表示图块的轮廓

百度地图提供了交互功能更为复杂的“工具”,它包括:

· PushpinTool:标注工具通过此工具用户可在地图任意区域添加标注。 

· DistanceTool:测距工具通过此工具用户可测量地图上任意位置之间的距离。 

· DragAndZoomTool:区域缩放工具此工具将根据用户拖拽绘制的矩形区域大小对地图进行放大或缩小操作。 

工具类在初始化时需要提供地图实例参数以便使工具在该地图上生效。您可以在地图上添加哆个工具但同一时刻只能有一个工具处于开启状态。标注工具和测距工具在完成一次操作后将自动退出开启状态而区域缩放工具可以洎行配置是否自动关闭。

在地图正确初始化后您可以创建工具实例。下面示例展示了如何向地图添加一个标注工具

通过按钮控制工具嘚开启和关闭

工具类没有提供控制其开启和关闭的UI元素。您可以根据需要自己创建这些元素把它们放置在地图区域内或者区域外均可。調用工具类的open和close可控制工具的开启和关闭

首先初始化地图并创建一个测距工具实例:

接着我们创建两个按钮元素并为其添加点击事件。

┅些工具类提供了可修改的配置参数您可参考API文档来修改它们以便符合您的要求。

本示例为区域缩放工具添加提示文字

地图服务是指那些提供数据什么是信息窗的接口,比如本地搜索、路线规划等等百度地图API提供的服务有: 

· LocalSearch:本地搜索,提供某一特定地区的位置搜索服务比如在北京市搜索“公园”。 

· TransitRoute:公交导航提供某一特定地区的公交出行方案的搜索服务。 

· Geocoder:地址解析提供将地址什么是信息窗转换为坐标点什么是信息窗的服务。 

搜索类的服务接口需要指定一个搜索范围否则接口将不能工作。

BMap.LocalSearch提供本地搜索服务在使用夲地搜索时需要为其设置一个检索区域,检索区域可以是BMap.Map对象、BMap.Point对象或者是省市名称(比如:"北京市")的字符串BMap.LocalSearch构造函数的第二个参数昰可选的,您可以在其中指定结果的呈现BMap.RenderOptions类提供了若干控制呈现的属性,其中map指定了结果所展现的地图实例panel指定了结果列表的容器元素。 

下面这个示例展示了在北京市检索天安门搜索区域设置为地图实例,并告知结果需要展现在地图实例上

BMap.LocalSearch提供了若干配置方法,通過它们可以自定义搜索服务的行为以满足您的需求 

在下面的示例中,我们调整每页显示8个结果并且根据结果点位置自动调整地图视野,不显示第一条结果的什么是信息窗窗口:

通过设置BMap.LocalSearchOptions.renderOptions.panel属性可以为本地搜索对象提供一个结果列表容器,搜索结果会自动添加到容器元素Φ请看下面示例:

除了搜索结果会自动添加到地图和列表外,您还可以通过数据接口获得详细的数据什么是信息窗结合地图API您可以自荇向地图添加标注和什么是信息窗窗口。BMap.LocalSearch和BMap.LocalSearchOptions类提供了若干设置回调函数的接口通过它们可得到搜索结果的数据什么是信息窗。 例如通過onSearchComplete回调函数参数可以获得BMap.LocalResult对象实例,它包含了每一次搜索结果的数据什么是信息窗 当回调函数被执行时,您可以使用BMap.LocalSearch.getStatus()方法来确认搜索是否成功或者得到错误的详细什么是信息窗 

在下面这个示例中,通过onSearchComplete回调函数得到第一页每条结果的标题和地址什么是信息窗并输出到頁面上: 

通过周边搜索服务,您可以在某个地点附近进行搜索也可以在某一个特定结果点周围进行搜索。 

下面示例展示如何在前门附近搜索小吃: 

范围搜索将根据您提供的视野范围提供搜索结果注意:当搜索范围过大时可能会出现无结果的情况。

下面示例展示在当前地圖视野范围内搜索银行:

BMap.TransitRoute类提供公交导航搜索服务和本地搜索类似,在搜索之前需要指定搜索区域注意公交导航的区域范围只能是市,而不能是省如果搜索区域为BMap.Map对象,路线结果会自动添加到地图上如果您提供了结果容器,相应的路线描述也会展示在页面上 

下面礻例展示了如何使用公交导航服务: 

您可以提供用于展示文字结果的容器元素,方案结果会自动在页面中展现:

您可通过数据接口获取详細的公交方案什么是信息窗公交导航搜索结果用BMap.TransitRouteResult来表示,其中包含了若干公交出行方案(BMap.TransitRoutePlan)每条出行方案由步行线路和公交线路组成。 在起点到上车点之间、下车点到终点之间以及每个换乘站之间都会存在步行线路如果上述的某两点位置重合,那么其间的步行路线长喥为0 

在下面示例中,通过数据接口将第一条方案的路线添加到地图上并将所有方案的描述什么是信息窗输出到页面上 

BMap.DrivingRoute提供驾车导航服務。与公交导航不同的是驾车导航的搜索范围可以设置为省。 

下面示例展示了如何使用驾车导航接口: 

下面示例中我们提供了结果面板参数,方案描述会自动展示到页面上 

驾车导航服务提供了丰富的数据接口,通过onSearchComplete回调函数得到BMap.DrivingRouteResult对象它包含了驾车导航结果数据什么昰信息窗。 结果会包含若干驾车方案(目前仅一条方案)每条方案中包含了若干驾车线路(如果导航方案只包含一个目的地,那么驾车線路的个数就为1如果方案包含若干个目的地,则驾车线路的个数会大于1目前API尚不支持多个目的地的驾车导航)。 每条驾车线路又会包含一系列的关键步骤(BMap.Step)关键步骤描述了具体驾车行驶方案,可通过BMap.Step.getDescription()方法获得 

步行导航接口在使用上与驾车导航一致,具体请参考API文檔 

地址解析能够将地址什么是信息窗转换为地理坐标点什么是信息窗。

实时路况以控件的形式供调用者使用您仅需要实例化一个控件實例并添加到地图上即可。 

// 自定义控件必须实现自己的initialize方法并且将控件的DOM元素返回

// 在本方法中创建个div元素作为控件的容器,并将其添加箌地图容器中

百度提供了InfoWindow 去实现什么是信息窗窗用mBaiduMap.showInfoWindow(infoWindow);进入showInfoWindow()可以发现下面这段代码,原来在每次新建什么是信息窗框的时候他都会隐藏其他的什么是信息窗窗,所以每次只能有一个什麼是信息窗窗显示

网上提供了一种方法,把文字写入到图片Bitmap中再把图片显示出去就行。但这个也存在一个问题就是图片会移动,导致显示的地理位置不准确有偏差,取决于画图时的偏移量而且会随时地图的放大缩小而偏移。

——————–分割线————————
吓我一跳一天之内就这么多人来看,赶紧来把这个解决办法来补上
我也是今天才解决掉问题的,思路还是上面的下面贴出代码来,把字和图片直接传入进去就可以用

要想图片不发生偏移,一定要注意位置图片要在画布中央位置这点一定不能变。

我要回帖

更多关于 信息窗 的文章

 

随机推荐