怎么显示百度地图api marker上所有的marker

百度地图API中不同marker的InfoWindow的显示内容不同的实现
这几天在写一个开发应用中,用到百度地图。功能要求将一批标记点加入地图,点击其中任意一个点,地图弹出InfoWindow框,里面显示与此点相关的内容。
按照常规写了如下代码:
var node = function(){
addmarks = function(nodes){
&&& var _nodes =
&&& var _markers
= new Array();
&&& for(var
i=0;i&_nodes.i++){
&&& var _marker
= new BMap.Marker(new BMap.Point(_nodes[i].lng,
_nodes[i].lat));
&&& var _node =
_nodes[i];
&&& var _html =
"节点名:"+_node.
_marker.addEventListener("click", function(e){
this.openInfoWindow(Window(_html));
_marker.addEventListener("mouseover",
function(e){&
this.setTitle("坐标@ "+_node.lng+","+_node.lat);
_markers.push(_marker);
& myClusterer = new BMapLib.MarkerClusterer(myMap,
{markers:_markers});
myClusterer.setMaxZoom(17);
//myClusterer.setStyles(myStyles);
上述写法很直观看起来没有问题,但遗憾的是,运行起来后,各个标记点虽然能够根据各自的坐标散布在地图上,但点击每个标记点所弹出的InfoWindow框里的信息则是nodes数组里面最后一个数组的元素的相应信息。
上网查了一下,没有人给出具体解决,只是提出了javascript的闭包来解决。
于是采用闭包方式重新写了代码:
addmarks = function(nodes){
& var _nodes =
& var _markers = new Array();
i=0;i&_nodes.i++){
var _html = "节点名:"+_node.
shop_markers.push(createMark(_nodes[i], _html));
& myClusterer = new BMapLib.MarkerClusterer(myMap,
{markers:shop_markers});
myClusterer.setMaxZoom(17);
//myClusterer.setStyles(myStyles);
createMark = function(node, info_html){
&&& var _marker
= new BMap.Marker(new BMap.Point(node.lng, node.lat));
_marker.addEventListener("click", function(e){
this.openInfoWindow(Window(info_html));
_marker.addEventListener("mouseover",
function(e){&
this.setTitle("位于: "+node.lng+","+node.lat);
&&& return
运行后成功。
关于js的闭包
已投稿到:
以上网友发言只代表其个人观点,不代表新浪网的观点或立场。16:06 提问
百度地图添加大量marker
使用百度地图搜索银行之类的地图上显示2000+marker不卡,
查询数据库显示2000+marker,地图就特别卡,基本不能拖拽、缩放之类的操作了,查询数据也就1-2秒,但是往地图里加载时就特别慢,加载(大约30-40秒)完成后地图上是显示2000+marker了,但是地图基本上就卡死了,这其中有什么区别,求高手解答啊,不要说什么聚合抽希的,我们项目需求就这样要求的。。。求大神帮忙啊!有没有人啊~
按赞数排序
同样遇到上边的问题, 请问楼主解决了没有。可不可以分享一下
其他相似问题隐藏后重新显示 百度地图 ,地图显示不完整,只显示左上角一小部分 - 推酷
隐藏后重新显示 百度地图 ,地图显示不完整,只显示左上角一小部分
问题描述:我一个DIV1里,放了一个显示百度地图的mapDiv。
问题出现 了, 当初始化(第一次显示DIV1)时 ,可以 正常显示 地图,
当隐藏后 再 显示 时, 地图就 出错了,地图显示不完整,只显示左上角一小部分。
&!-- 显示地图,获取经纬度&&& start --&
&div id=&mapModel& class=&modal& fade & tabindex=&-1& role=&dialog&
aria-labelledby=&mapModalLabel& aria-hidden=&true&&
&div class=&modal-dialog &&
&div class=&modal-content bg &&
&div class=&modal-header bj_table&&
&button type=&button& class=&close& data-dismiss=&modal&
aria-hidden=&true&&&&/button&
&h2 class=&modal-title& id=&mapModalLabel&&获取经纬度:&/h2&
&div class=&modal-body &&
&h2 &拖动覆盖物到目标位置,以选择经纬度:&/h2&
&div id=&mapContent& style=&width:540height:400margin-top:15px&&&/div&
&!-- 显示地图,获取经纬度end --&
错误代码:
//获取经纬度坐标
$(&#getCoordinate&).click(function(){
//创建地图
initMarker=drawMap($('#longitude').val(),$('#latitude').val());
initMarker.addEventListener(&dragend&, function(e) {
if (confirm('确定此位置?')) {
$('#mapModel').modal('hide');
$('#longitude').val(e.point.lng);
$('#latitude').val(e.point.lat);
//创建地图函数:
function drawMap(longitude,latitude) {
//如果经纬度为空,就把燕郊监狱设置为地图的中心点
if(longitude==&&||latitude==&&){
longitude=&116.853944&;
latitude=&39.934043&;
$('#mapModel').modal();
//定义一个中心点坐标
var initPoint = new BMap.Point(longitude, latitude);
var map = new BMap.Map(&mapContent&);//在百度地图容器中创建一个地图
map.centerAndZoom(initPoint, 14);//设定地图的中心点和坐标并将地图显示在地图容器中
//window.map =//将map变量存储在全局
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
var initMarker = new BMap.Marker(initPoint); // 创建标注
map.clearOverlays();
map.addOverlay(initMarker);
initMarker.enableDragging();
map.panBy(270, 200);//中心点偏移多少像素(width,height)为div 宽高的1/2;
return initM
var map = new BMap.Map(&mapContent&);//在百度地图容器中创建一个地图
//获取经纬度坐标
$(&#getCoordinate&).click(function(){
//创建地图
initMarker=drawMap(
$('#longitude').val(),$('#latitude').val());
initMarker.addEventListener(&dragend&, function(e) {
if (confirm('确定此位置?')) {
//$('#mapContent').hide();
$('#mapModel').modal('hide');
//console.log(e.point.lng + &, & + e.point.lat);
$('#longitude').val(e.point.lng);
$('#latitude').val(e.point.lat);
//创建地图函数:
function drawMap(
longitude,latitude) {
//如果经纬度为空,就把燕郊监狱设置为地图的中心点
if(longitude==&&||latitude==&&){
longitude=&116.853944&;
latitude=&39.934043&;
$('#mapModel').modal();
//定义一个中心点坐标
var initPoint = new BMap.Point(longitude, latitude);
//var map = new BMap.Map(&mapContent&);//在百度地图容器中创建一个地图
注释掉这行代码
map.centerAndZoom(initPoint, 14);//设定地图的中心点和坐标并将地图显示在地图容器中
//window.map =//将map变量存储在全局
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
var initMarker = new BMap.Marker(initPoint); // 创建标注
map.clearOverlays();
map.addOverlay(initMarker);
initMarker.enableDragging();
map.panBy(270, 200);//中心点偏移多少像素(width,height)为div 宽高的1/2;
return initM
错误原因分析:
var map = new BMap.Map(&mapContent&);
只需要初始化一次,不管以后如何操作地图,map只需要创建一次,多次创建就会使得地图显示错误。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置: 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致为什么显示地图上所有的marker_珍藏百科
为什么显示地图上所有的marker
编辑: &&&来源:用户发布&&&发布时间:&&&查看次数:35
为什么显示地图上所有的marker为什么显示地图上所有的marker
listList遍历List调用AMap象addMarker() for (int i = 0; i &*ist.size(); i++) { MarkerOptions marker =*ist.get(i); aMap.addMarker(marker); } 关于-MarkerOptions创建: MarkerOptions option = new MarkerOp...本回答由网友推荐
游戏百科相关
本文相关文章
- 关于我们 - 版权声明-
广告服务 - 友情链接 - 管理登录 -
Copyright &
All Rights Reserved
如有任何侵权、造谣信息请将网页地址和有法律效力的侵权造谣证明或判决书发往QQ:小时内删除。
苏ICP备号-1&Android 百度地图sdk 标注图marker中可以切换显示不同内容
Android 百度地图sdk 标注图marker中可以切换显示不同内容
记录一个前段时间解决的功能需求
先直接上图片看看实现后的效果:
具体需求为,在地图页上显示出所有的场站marker之后,点击左侧的按钮可以实现动态切换场站marker中显示的数据。
实现思路为:构造marker时,icon方法中传入的参数BitmapDescriptor设置为一个自定义的view,而不是一张简单图片,在这个view中,将大头针图片设置为view背景,上面放一个textview,点击按钮的时候,改变textview上面的值就可以了。
(如果没明白继续往下看↓)
====================================
在实现这个需求之前,有必要先了解一下覆盖物(Overlay)的构造方式
1、在百度地图中添加覆盖物,需要传入的参数是覆盖物的设置,返回值为Overlay
Overlay com.baidu.mapapi.map.BaiduMap.addOverlay(OverlayOptions arg0)
2、那么接下来关键就落在了OverlayOptions这个重要的类上面,通过查看api发现,在实现具体功能的时候我们需要用到的是他的一系列子类
ArcOptions, CircleOptions, DotOptions, GroundOverlayOptions, MarkerOptions, PolygonOptions, PolylineOptions, TextOptions
这些子类各有各的特点,这里只说MarkerOptions,我叫他标注物的设置
而观察MarkerOptions这个类的方法会发现,大部分方法的返回值都是MarkerOptions,也就是说创建他的时候可以一路“点”出来
各种各样的属性设置很多,本文就不多说,API上介绍的都很清楚
一般的创建方式是这样的:
MarkerOptions ooA =
ooA=newMarkerOptions().position(llA).icon(free_view).zIndex(9).draggable(false).extraInfo(mBundle);
==============================================
接下来到重点了
要做出题目中的需求,上面创建ooA的过程中,最重要的方法就是.icon()这个方法了,这个方法顾名思义就是为marker设置显示出的图标、样式,括号中接收的参数是BitmapDescriptor
MarkerOptions.icon(BitmapDescriptor arg0)
也就是说这个icon的来源是一个BitmapDescriptor
查找之后发现BitmapDescriptor的构成方式有以下几种
static BitmapDescriptor fromAsset(java.lang.String
assetName)
根据资源名称创建bitmap描述信息
static BitmapDescriptor fromAssetWithDpi(java.lang.String assetName)
根据资源名称和dpi创建bitmap描述信息,根据不同设备的dpi,对asset下图片等比例缩放
static BitmapDescriptor fromBitmap(Bitmap image)
根据 Bitmap 创建描述信息
static BitmapDescriptor fromFile(java.lang.String fileName)
根据应用程序私有文件夹里包含文件的文件名创建 bitmap 描述信息
static BitmapDescriptor fromPath(java.lang.String absolutePath)
根据文件绝对路径创建 bitmap 描述信息
static BitmapDescriptor fromResource(int resourceId)
根据资源 Id 创建 bitmap 描述信息
static BitmapDescriptor fromView(View view)
根据一个 View 创建 Bitmap 描述信息, 当 view 为 null 时返回 null
观察之后,很显然最后一个fromView(View view)是我们需要的
然后画一个我们需要的布局出来:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon" &
android:id="@+id/tv_num_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="¥99"
android:textSize="9sp" /&
接下来就是在代码里添加了:
1、首先通过上面的布局做一个view出来,并且找到那个textview,然后给textview
View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.pop_main_marker, null)
TextView tv_num_price=(TextView) view.findViewById(R.id.tv_num_price)
tv_num_price.setText("标注物上面你想显示的信息")
2、做出BitmapDescriptor
BitmapDescriptor free_view = BitmapDescriptorFactory.fromView(view);
3、创建MarkerOptions
MarkerOptions ooA =
ooA=newMarkerOptions().position(llA).icon(free_view).zIndex(9).draggable(false).extraInfo(mBundle);
4、在百度地图中显示出标注物
mBaiduMap.addOverlay(ooA)
5、到这里主要部分就基本完成了,下面就是设置一个按钮,点击的时候传不同的显示信息过去给marker显示,这部分这里就不再赘述了
我这里的切换按钮用的是checkbox控件显示的,关于checkbox更换背景相关的问题,请参照我的另一篇博客:
如有问题,请留言交流。
我的热门文章
即使是一小步也想与你分享}

我要回帖

更多关于 百度地图 marker 动画 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信