关于百度地图 BMap.InfoWindow 只显示最后一条信息解决方法,以及完整应用示例

本贴最后更新于 3874 天前,其中的信息可能已经时移世改

之前在做技术试验的时候,用到百度地图api的东西了,再做的时候遇到一些问题,后来解决了。并且自己封装了一个显示的方法。

总共有三个文件。

以下是代码:

hotel.js

var hotel =[
{"lat" : "39.914780580","lng":"116.416859386","hotelName" : "北京饭店","hotelAddress":"地址:东城区东长安街33号(地铁王府井站A口西侧)","titleName":"国家旅游局评定星级为5星级","srcImage":"hotel.jpg"},
{"lat" : "39.943337708","lng":"116.279685299","hotelName" : "北京美泉宫饭店","hotelAddress":"地址:北京市海淀区西四环北路125号(四季青桥往南1000米)","titleName":"豪华型酒店","srcImage":"hotel.jpg"},
{"lat" : "39.964783886","lng":"116.353210814","hotelName" : "北京艺海商务酒店","hotelAddress":"地址:北京市海淀区学院南路33号(明光桥西500米、四道口金五星百货旁边)","titleName":"高档型酒店","srcImage":"hotel.jpg"},
{"lat" : "40.006941490","lng":"116.378138466","hotelName" : "北京亚奥国际酒店(原劳动大厦)","hotelAddress":"地址:东城区东长安街33号(地铁王府井站A口西侧)","titleName":"国家旅游局评定星级为5星级","srcImage":"hotel.jpg"},
{"lat" : "39.915873223","lng":"116.429786821","hotelName" : "北京好苑建国酒店","hotelAddress":"地址:北京市东城区建国门内大街17号(朝阳门南小街与建国门内大街交汇处北侧路北)","titleName":"国家旅游局评定星级为5星级","srcImage":"hotel.jpg"},
{"lat" : "39.907550366","lng":"116.423456812","hotelName" : "北京新侨诺富特饭店","hotelAddress":"地址:东城区东长安街33号(地铁王府井站A口西侧)","titleName":"国家旅游局评定星级为5星级","srcImage":"hotel.jpg"}
];


上面是构造的json数据。
mapView.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>地图显示--${webname }</title>
<%@ include file="/view/include/global.jsp"%>
<script type="text/javascript" src="http://api.map.baidu.com/api?&v=1.4">
</script>
<script type="text/javascript" src="${ctx}/js/761js/citysearch.js"></script>
<script type="text/javascript" src="${ctx}/view/map/hotel.js"></script>
<script type="text/javascript" src="${ctx}/view/map/newUtil.js"></script>
	<style type="text/css">
#rightContainer ul {list-style:none;margin:0px; color :red; } 
#rightContainer li {float:center;}
</style>
</head>
<body>
	<p>
		<input id="searchValue" name="searchValue" type="text" size="25" /> <input
			id="search" name="search" type="hidden" /> <input type="button"
			border="3" value="搜索" onclick="searchCity()" />
	</p>
	<div style="width: 75%; height: 800px; border: 1px solid gray; float: left"
		id="container"></div>
	<div style="width: 20%; height: 800px; border: 1px solid gray; float: right"
		id="rightContainer"></div>
	<script type="text/javascript">
		baiduMapFunction("container", hotel);
		FlightCity('searchValue', 'search');
	</script>

</body>
</html><br><br>

以上为jsp页面

newUtil.js

function baiduMapFunction(divId, hotelArray) {
	map = new BMap.Map(divId);// 创建百度地图对象
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
// 启用滚轮放大缩小,默认禁用
map.enableScrollWheelZoom(); 
// 启用地图惯性拖拽,默认禁用
map.enableContinuousZoom(); 
 // 添加默认缩放平移控件,左上角
map.addControl(new BMap.NavigationControl());
// 添加默认比例尺控件
map.addControl(new BMap.ScaleControl()); 
// 左上角,默认地图控件
map.addControl(new BMap.MapTypeControl({
	anchor : BMAP_ANCHOR_TOP_RIGHT
})); 
for ( var o in hotelArray) {
	// 坐标点
	var point = new BMap.Point(hotelArray[o].lng, hotelArray[o].lat);
	// 标注显示名称
	var hotelNameLabel = new BMap.Label(hotelArray[o].hotelName, {
		offset : new BMap.Size(20, -10)
	});

	var sContent = &quot;&lt;div&gt;&quot;
			+ &quot;&lt;h4 style='margin:0 0 5px 0;padding:0.2em 0'&gt;&quot;
			+ hotelArray[o].hotelName
			+ &quot;&lt;/h4&gt;&quot;
			+ &quot;&lt;img style='float:right;margin:4px' id='imgDemo' src='../images/&quot;
			+ hotelArray[o].srcImage
			+ &quot;' width='139' height='104' title=''/&gt;&quot;
			+ &quot;&lt;p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'&gt;&quot;
			+ hotelArray[o].hotelAddress + &quot;&lt;/p&gt;&quot; + &quot;&lt;/div&gt;&quot;;

	// 设置label 文本框的样式
	hotelNameLabel.setStyle({
		&quot;borderColor&quot; : &quot;red&quot;,
		&quot;color&quot; : &quot;red&quot;,
		&quot;cursor&quot; : &quot;pointer&quot;

	});
	//创建marker闭包,添加监听
 	createMark = function(lng, lat, info_html) {
		var _marker = new BMap.Marker(new BMap.Point(lng, lat));
		_marker.addEventListener(&quot;click&quot;, function(e) {
			this.openInfoWindow(new BMap.InfoWindow(info_html));
		});
		_marker.addEventListener(&quot;mouseover&quot;, function(e) {
			this.setTitle(&quot;位于: &quot; + lng + &quot;,&quot; + lat);
		});
		return _marker;
	};
	function  convertS(id){
		  var aNew = id.replace(&quot;.&quot;,&quot;1&quot;);
		   return aNew
	}
	 marker = createMark(hotelArray[o].lng, hotelArray[o].lat, sContent);
		 marker.id = convertS(hotelArray[o].lng);
	map.addOverlay(marker);
	// 添加百度label
	marker.setLabel(hotelNameLabel); 
	//开始处理右边div列表中的数据,然后开始添加点击事件
	function listHotelDivFunction(rightContainer, marker,lng,name,sContent) {
		
		$(&quot;#&quot; + rightContainer).append(&quot;&lt;li id=&quot;+ convertS(lng)+&quot;&gt;&quot; +name + &quot;&lt;/li&gt;&lt;br/&gt;&quot;);
		$(&quot;#&quot;+convertS(lng)).click(function(){
				marker.openInfoWindow(new BMap.InfoWindow(sContent));
		});
		
		}
		listHotelDivFunction(&quot;rightContainer&quot;, marker,hotelArray[o].lng,hotel[o].hotelName,sContent);
}


// 地图显示到查询结果处
	city = new BMap.LocalSearch(map, {
		renderOptions : {
			map : map,
			autoViewport : true
		}
	}); 
		

}
//查找城市
function searchCity() {
var s = $("#searchValue").val();
city.search(s);
}

上面这个函数,就接受一个json数组对象,和一个在你页面的divId。因为要显示地图

 

先把地图初始化之后,在循环里面一次从json中读取数据,然后new 出标注对象。再为每个标注对象添加监听方法

在添加监听方法的时候,会遇到,不管点击哪一个标注,都是输出最后一条的信息。

这主要是作用域的问题,之后写了个闭包的方法。如下

var 	createMark = function(lng, lat, info_html) {
			var _marker = new BMap.Marker(new BMap.Point(lng, lat));
			_marker.addEventListener("click", function(e) {
				this.openInfoWindow(new BMap.InfoWindow(info_html));
			});
			_marker.addEventListener("mouseover", function(e) {
				this.setTitle("位于: " + lng + "," + lat);
			});
			return _marker;
		};
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 192 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    76 引用 • 421 回帖 • 1 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 249 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    16 引用 • 53 回帖 • 104 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖 • 1 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 7 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 59 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    5 引用 • 13 回帖
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    85 引用 • 1192 回帖 • 461 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1090 引用 • 3467 回帖 • 296 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 33 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 431 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    21 引用 • 22 回帖 • 1 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 581 关注
  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1397 回帖 • 1 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    5 引用 • 15 回帖 • 224 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 688 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 151 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 42 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 32 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1424 引用 • 10041 回帖 • 470 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    76 引用 • 421 回帖 • 1 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 34 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1738 回帖 • 4 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    90 引用 • 383 回帖
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 45 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 379 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖