百度地图API--信息窗口

Posted _MAN_样

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了百度地图API--信息窗口相关的知识,希望对你有一定的参考价值。

信息窗口

-----纯文本信息窗口 
为了更方便的提示用户,在地图的指定的地方添加文本信息的窗口,给用户直观展示信息,下面是如何添加一个纯文本的信息窗口。 
下面是添加一个文本窗口: 

/*
	 * 添加纯文本信息窗口
	 */
	function addTextInfoWindow(map) {
		var opts = {
			width : 200, // 信息窗口宽度
			height : 60, // 信息窗口高度
			title : "西安美林电子有限责任公司", // 信息窗口标题
			enableMessage : true,//设置允许信息窗发送短息
			message : "欢迎来到西安美林电子有限责任公司就职..." // 信息内容
		}
		var infoWindow = new BMap.InfoWindow("地址:科技二路西安软件园汉韵阁C座501", opts); // 创建信息窗口对象
		map.openInfoWindow(infoWindow, map.getCenter()); //开启信息窗口
}

-----复杂信息窗口 

信息窗口不断能够展示纯文本的,还可以展示图片等复杂的信息,这样需要我们有一定的html基础,下面介绍如何添加一个复杂文本信息窗口。

/*
	 * 添加复杂信息窗口	
	 */
	function addComplexInfoWindow(map) {
		// 拼接html字符串
		var sContent = "<h4 style=‘margin:0 0 5px 0;padding:0.2em 0‘>汉韵阁</h4>"
				+ "<img style=‘float:right;margin:4px‘ id=‘imgDemo‘ src=‘image/hyg.jpg‘ width=‘139‘ height=‘104‘ title=‘汉韵阁‘/>"
				+ "<p style=‘margin:0;line-height:1.5;font-size:13px;text-indent:2em‘>汉韵阁坐落于西安软件园...</p>"
				+ "</div>";
		var marker = new BMap.Marker(map.getCenter());
		var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
		map.addOverlay(marker);
		marker.addEventListener("click", function() {
			// 调用了marker对象的openInfoWindow方法
			this.openInfoWindow(infoWindow); 
		});
}


以上是关于百度地图API--信息窗口的主要内容,如果未能解决你的问题,请参考以下文章

百度地图API--信息窗口

百度地图api中如何实现右侧列表打开信息窗口

百度地图API JavaScript关键字检索后怎么获得到当前位置的窗口信息内容?

百度地图API,如果做一个自定义样式的信息窗口?默认的框框太丑了

百度地图批量添加标注+点击显示对应窗口信息

如何在百度地图api(js)中的百度信息框添加“详情”的链接。。。类似 下面的图片