`

鼠标点击获取百度地图的经度与纬度(可直接嵌入到项目中)

 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>bdMap.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		
		<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=你的秘钥&amp;services=&amp;t=20140114135006"></script>
		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
		<style type="text/css">
			body,h2{margin:0;padding:0;}
			#faqdiv2{position:absolute;width:400px;right:10%;top:10%;height:500px;z-index:100;background-color:#fff;border:1px #0067a5 solid;padding:1px;}
			#faqdiv2 h2{height:25px;font-size:14px;background-color:#0067a5;position:relative;padding-left:10px;line-height:25px;}
			#faqdiv2 h2 {color:#fff}
			#faqdiv2 h2 a{position:absolute;right:5px;font-size:12px;color:#fff;}
			#l-map{height:95%;width:100%;}
		</style>
	</head>

	<body>
		<script type="text/javascript">
			$(function(){
				$(".addclass").click(function(){
					var yscroll =document.documentElement.scrollTop;
					$("#faqdiv2").css("display","block");
					document.documentElement.scrollTop=0;
				});
				$(".close").click(function(){
					$("#faqdiv2").css("display","none");
				});
			})
		</script>
	
		<a class="addclass"  href="#"><img src="http://www.baidu.com/img/bdlogo.gif"></a>
		经度:<input id="r-result1">纬度:<input id="r-result2">
	
		<div id="faqdiv2" style="display: none;">
			<h2>选取坐标<a class="close" href="#">关闭</a></h2>
			<div id="l-map">
				
			</div>
		</div>
				<script type="text/javascript">
					var map = new BMap.Map("l-map");
					map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。
					map.enableScrollWheelZoom();                            //启用滚轮放大缩小
					map.addEventListener("click", function(e){
						//alert("X:"+e.point.lng+"Y:"+e.point.lat);
						$('#r-result1').val(e.point.lng);
						$('#r-result2').val(e.point.lat);
					});
				</script>
	</body>
</html>

 

分享到:
评论

相关推荐

    C++调用百度地图案例(VC++)

    在本项目中,我们主要探讨如何使用C++编程语言与百度地图API进行集成,以便在VC++环境下实现百度地图的二次开发。这是一个涉及到地理信息系统(GIS)、网络编程以及图形用户界面设计的重要实践。 首先,我们需要...

    百度鼠标实拾获取经纬度demo,简洁版

    "百度鼠标实拾获取经纬度demo,简洁版"是一个专为此目的设计的示例项目,它利用百度地图API来实现用户在地图上移动鼠标时实时显示当前位置的经纬度。这个项目对于开发者来说是一个很好的学习资源,尤其是对于那些...

    基于ECharts结合百度地图绘制地理信息数据

    百度地图API是百度提供的地图服务接口,开发者可以通过它在网页上嵌入地图、获取地理位置、路径规划等功能。它提供了JavaScript版本的API,方便前端开发者使用。 **结合ECharts与百度地图** 将ECharts与百度地图...

    echarts自作地图显示散点图 tooltip自定义内容

    在实际应用中,需要将这些资源正确加载到ECharts中,以确保地图的正常显示。 通过以上步骤,我们可以创建出一个具有自定义地图、散点图和个性化Tooltip的ECharts应用。这不仅有助于数据的直观展示,还能增强用户...

    Google地图.net代码

    - 添加标记:对于每个从数据库获取的地标,创建一个新的`google.maps.Marker`对象,设置其位置(经度和纬度),并将其添加到地图上。 4. **地址搜索(Geocoding)** - Geocoding服务:Google Maps API提供了一个...

    vc++开发的google地图定位系统

    4. **地图标记与点击事件**:如果需要在地图上添加标记或实现点击事件,你需要处理鼠标点击事件,根据点击位置计算对应的经纬度,然后更新地图标记或执行其他操作。 5. **授权与合规**:在商业使用Google Maps API...

    html5地图交互式显示坐标地址信息

    5. 事件监听与处理:为了让地图具有交互性,我们需要监听用户的鼠标或触摸操作,例如点击、拖动等。通过添加事件监听器,我们可以响应这些事件,更新地图的状态或执行相应的功能。 6. 自定义标记与信息窗口:在地图...

    JS自动获取公司位置地址代码.zip

    总结来说,"JS自动获取公司位置地址代码"涉及到的关键技术有:百度地图API的使用、地图初始化、地图控件加载、定位功能的实现、地图标注以及与后端的交互。这个功能对于需要在网页上展示公司位置或让用户选择位置的...

    OpenScales基本功能事例

    最后,`&lt;os:PanZoom&gt;`组件提供了平移和缩放地图的功能,它包括两个实例:一个作为独立的导航控件,另一个嵌入到`&lt;os:ControlPanel&gt;`中,提供更复杂的导航选项。 这个OpenScales基本功能事例展示了如何构建一个交互...

    MapX简单示例

    MapX是MapInfo公司开发的一款地图控件,用于在Windows应用程序中嵌入地图显示和地理信息系统功能。在C#编程环境中,我们可以利用MapX来构建客户端/服务器(C/S)架构的应用程序,实现地图的交互操作,如放大、缩小、...

    基于jquery实现控制经纬度显示地图与卫星

    - Google Maps API允许开发者在网页中嵌入Google地图,并实现与地图的交互,如添加标记、绘制图形等。 - 通常,使用Google Maps API前需要在Google Cloud Platform上注册账户并获取一个API密钥。 - 本示例中使用...

    google map API 的应用

    3. **初始化地图**:在JavaScript中,通过`new GMap2()`创建地图对象,传入地图容器的DOM元素,然后使用`setCenter()`方法设置地图中心点(经度39.9493,纬度116.3975),并设置初始缩放级别(13表示13级缩放)。...

    GraphOnMap:使用 GPS 坐标在 google 地图上绘制图形以在地图上显示图形的交互式视图的示例

    在 GraphOnMap 项目中,开发者会使用 API 的核心功能,如初始化地图、获取地图对象、设置地图中心点和缩放级别,以及在地图上添加图形元素。 GPS 坐标是全球定位系统使用的坐标系统,由经度、纬度和海拔高度组成。...

    GooglemapAPI教程.docx

    - **经纬度**:地图上的位置由经度和纬度坐标表示,如上述示例中的39.9493, 116.3975。 - **地图类型**:可以设置为卫星图、地形图或混合图等。 - **地图事件**:响应用户的点击、拖动等交互,可以绑定各种事件...

    google earth api

    谷歌地球API是通过JavaScript与Web浏览器交互的接口,它允许开发人员创建互动式的3D地球模型,并将其嵌入到网页中。用户可以通过这个API添加自定义图层、地标、路径、图片覆盖物以及动画效果,从而实现各种定制化的...

    Nautical_Codes:航海指南

    HTML配合CSS(Cascading Style Sheets)可以设计出美观的互动地图,利用`&lt;img&gt;`标签展示海图,并用JavaScript处理鼠标点击事件,实现点击地图设定航点的功能。同时,`&lt;canvas&gt;`元素则可以用来绘制航线,动态展示航行...

    HTML5.Web.Application.Development.By.Example

    console.log("纬度:" + position.coords.latitude + ", 经度:" + position.coords.longitude); }); } else { console.log("您的浏览器不支持Geolocation"); } ``` ### 最佳实践与调试技巧 #### 代码优化与...

    html5测试题.docx

    - **D** 鼠标事件`onmouseover`:当鼠标移到元素上时触发。 **答案**: B #### 21. 对于Opera浏览器, 若要播放mp3格式的音频文件, 应该使用() - **解析**: HTML5 `&lt;audio&gt;`标签支持多种音频格式。 - **A** `...

Global site tag (gtag.js) - Google Analytics