`

百度地图Api进阶教程-弹出信息窗口5.html

 
阅读更多
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>


<script type="text/javascript">
	var iscreatr=false;
	function initialize() {
		//---------------------------------------------基础示例---------------------------------------------
		var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例
		//map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时,即可设置中心点和地图缩放级别。
		map.centerAndZoom("成都",13);                     // 初始化地图,设置中心点坐标和地图级别。
		map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动
		

		//---------------------------------------------信息窗口(地图上由此只有1个)---------------------------------------------
		var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>哈哈门</h4>" + 
"<img style='float:right;margin:4px' id='imgDemo' src='http://avatar.csdn.net/4/7/8/1_sd0902.jpg' width='139' height='104' title='哈哈门'/>" + 
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>哈哈门坐落在中国北京市中心,故宫的南侧,与哈哈门广场隔长安街相望,是清朝皇城的大门...</p>" + 
"</div>";
		var point = new BMap.Point(104.017287, 30.685906);//默认
		var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象

		map.openInfoWindow(infoWindow,point);



	    //---------------------------------------------创建标注---------------------------------------------
		var point = new BMap.Point(104.117287, 30.685906);//默认
		// 创建标注对象并添加到地图  
		var marker = new BMap.Marker(point);  
		map.addOverlay(marker);  
		

		//---------------------------------------------点击标注弹出信息窗口---------------------------------------------
		var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈,你看见我啦!我可不常出现哦!</p><p style='font-size:14px;'>看看我是如何添加上来的!</p>");
	
		marker.addEventListener("click", function(e){ 
			this.openInfoWindow(infoWindow);
		});
	
	}
 
	function loadScript() {
	   var script = document.createElement("script");
	   script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
	   document.body.appendChild(script);
	}
 
	window.onload = loadScript;
</script>


</head>
 <body>
	<div id="r-result" style="float:left;width:100px;">打印坐标</div>
	<div id="allmap" style="width: 800px; height: 500px"></div>
</body>
</html>

<script type="text/javascript">
	// 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));  
	 // map.setZoom(14);   //放到到14级
</script>

 

分享到:
评论

相关推荐

    百度地图API学习案例

    在IT行业中,百度地图API是开发者们常用的工具之一,它为...总之,“百度地图API学习案例”是一个绝佳的起点,通过它你可以掌握百度地图API的基础知识,并逐步进阶到高级应用,从而在你的项目中实现强大的地图功能。

    jquery弹出悬浮插件webui-popover.zip

    jQuery弹出悬浮插件WebUI-Popover就是这样一款轻量级的解决方案,它为开发者提供了便捷的方式来创建功能丰富的提示和弹出窗口。下面,我们将深入探讨这款插件的核心特性、安装步骤以及使用方法。 WebUI-Popover是...

    Python库 | PySimpleGUI-4.29.0-py3-none-any.whl

    你可以通过调用`sg.theme()`改变窗口的外观,或者使用`sg.popup`系列函数创建弹出对话框。对于复杂的程序,可以利用线程或多进程来实现并发处理,保持界面响应的流畅性。 **总结** PySimpleGUI是Python GUI开发的...

    Cross-Platform GUI Programming with wxWidgets.pdf

    此段代码展示了如何使用wxWidgets创建一个简单的GUI应用,其中包括了一个窗口和一个按钮,当点击按钮时会弹出消息框。 #### 六、进阶技巧 - **自定义控件**:通过继承wxWidgets提供的基类,可以轻松地扩展新的控件...

    Android自动化测试之Robotium--进阶操作.pdf

    2. Dialog是依附于Activity存在的弹出窗口,同样会创建一个Window对象。 3. PopupWindow是一个悬浮窗,常与AlertDialog作比较使用。 4. WindowManager负责管理窗口的添加、更新和删除等操作。 5. 在Android 4.2版本...

    android百度地图标注覆盖物和覆盖物点击出现对话框的实现

    3. **覆盖物(Overlay)概念**:在百度地图上,覆盖物是用于表示地图上的特定点或区域的对象,比如标记(Marker)、信息窗口(InfoWindow)等。我们可以自定义覆盖物的图标、位置和行为。 4. **自定义覆盖物**:...

    百度地图demo

    百度地图API提供了多种类型的覆盖物,包括点标记、信息窗口、多边形、圆等。开发者可以根据需求自定义样式和交互行为。 4. **地理编码与反地理编码** 地理编码是将地址转换为坐标的过程,反地理编码则是将坐标转换...

    google maps api 地图开发大全源码

    信息窗口可以在用户点击标记或地图上的某个位置时弹出,显示详细信息。源码可能会展示如何创建和操作信息窗口。 4. **地理编码**: 谷歌地图API提供了地理编码服务,可以将地址转换为经纬度坐标,反之亦然。这...

    AnyLayer,Android对话框弹出窗口.zip

    AnyLayer是一个开源项目,专门针对Android提供了灵活、可定制化的对话框弹出窗口解决方案。这个项目的源代码存放在名为"AnyLayer-master"的压缩包中,下面将详细介绍AnyLayer及其相关知识点。 1. **AnyLayer项目...

    jQuery Mobile开发源码 api文档中文

    - **$.fn.popup()**:创建弹出窗口或对话框,常用于显示提示信息或选择菜单。 在压缩包中,`jQuery Mobile a4.chm`文件可能是一个帮助文档,包含了完整的API索引和示例代码,方便开发者查找和学习。而`jQuery ...

    Google Maps API V3学习(例子不断增加中)

    3. 信息窗口:当用户点击标记或其他地图元素时,显示额外信息的弹出框。 ```javascript var infowindow = new google.maps.InfoWindow({ content: 'Hello World!' }); infowindow.open(map, marker); ``` 4. 覆盖物...

    Pop Easy轻巧的modal弹出层插件

    Modal弹出层是一种半透明的窗口,覆盖在网页的主内容上,通常用于展示重要的信息或交互。用户必须与弹出层交互(关闭或完成操作)后才能继续浏览网页的其他部分。这种设计模式有助于保持用户的注意力集中在特定任务...

    ArcGIS_API_for_Javascript_开发教程

    - **InfoWindow高级定制**:自定义弹出窗口的样式和内容。 - **自定义专题图**:根据特定需求创建自定义的专题地图。 - **第三方地图资源加载**:支持加载来自其他服务提供商的地图资源,如天地图、百度地图等。 - *...

    GoogleMap地图控件应用源码_googlemapcontrol.zip

    3. 标记与信息窗口:了解如何在地图上添加标记,以及点击标记时弹出信息窗口显示详细信息。 4. 路线规划:如何实现从A点到B点的驾车、步行或骑行路线规划。 5. 事件处理:掌握监听用户交互,如点击地图、拖动标记等...

    ArcGIS API for JavaScript

    - **InfoWindow高级定制**:提供了定制弹出窗口的功能,用于展示要素的详细信息。 - **自定义专题图**:支持创建自定义的专题地图,如热力图、折线图等。 - **第三方地图资源加载**:支持加载来自其他平台的地图资源...

    弹出另外一个窗口的菜单易语言源码-易语言

    本教程将聚焦于一个特定的编程需求:如何在易语言中实现弹出另一个窗口的菜单功能。由于易语言内置的“弹出菜单”命令无法满足在非当前窗口上显示菜单的需求,因此我们需要利用API(应用程序接口)来实现这一功能。 ...

Global site tag (gtag.js) - Google Analytics