<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>html5获取地理位置并显示在goole地图</title>
</head>
<body>
<input type="button" id="getPos" value="获取我的位置">
<div id="info" class="">
您所在的位置： 经度
<span class="tip">unknown</span>，纬度
<span class="tip">unknown</span>
</div>
<script src="http://www.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript">
</script>
<script type="text/javascript">
var t = 0;
var dom = {
btn : document.getElementById('getPos'),
info : document.getElementById('info')
};
dom.btn.onclick = function(){
if (navigator.geolocation) {
dom.info.innerHTML = "请等待查询结果返回";
dom.info.className = "warn";
navigator.geolocation.getCurrentPosition(getPositionSuccess,getPositionError,{timeout:5000});
}else {
dom.info.innerHTML = "抱歉，您所使用的浏览器不支持 Geolocation 接口";
dom.info.className = "warn";
}
}
function getPositionSuccess(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
dom.info.innerHTML = "您所在的位置： 经度" + lat + "，纬度" + lng;
if(typeof position.address === "undefined"){
dom.info.innerHTML += "<br /><span class='tip'>您的浏览器目前仅提供坐标查询，使用 Firefox 3.5+ 可获得更多信息</span>";
}else{
dom.info.innerHTML += "<br /><span class='tip'>" + position.address.country + " , " + position.address.region + " , " + position.address.city+"</span>";
}
goolemap(position);
}
function goolemap(position) {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(center, 14);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var marker = new GMarker(center, {draggable: false});
marker.openInfoWindowHtml("公司所在地" + position.coords.latitude + " " + position.coords.longitude + " " + map.getZoom());
map.addOverlay(marker);
}
}
function getPositionError(error){
switch(error.code){
case error.TIMEOUT :
dom.info.innerHTML = "连接超时，请重试";
break;
case error.PERMISSION_DENIED :
dom.info.innerHTML = "您拒绝了使用位置共享服务，查询已取消";
break;
case error.POSITION_UNAVAILABLE :
dom.info.innerHTML = "亲爱的火星网友，非常抱歉<br />我们暂时无法为您所在的星球提供位置服务";
break;
}
}
</script>
<div id="map_canvas" style="width: 800px; height: 400px"></div>
</body>
</html>
参考网上的html5获取物理地址的实例，添加js显示在goole地图上，但是差距好像很大...
分享到：
相关推荐
14. **游戏开发**：JavaScript也可以用于构建简单的HTML5游戏，利用Canvas元素和物理引擎实现动态效果。 15. **页面过渡和路由**：对于单页应用程序（SPA），JavaScript可以实现平滑的页面过渡和路由管理，提升页面...
除了显示经纬度，开发者还可以利用这些坐标与地图服务（如谷歌地图或百度地图）集成，将用户的位置显示在地图上。例如： ```javascript function showPosition(position) { var latlon = position.coords.latitude...
人物层位于地图层之上，因为角色是站在地图上的。子对象的坐标相对于父对象，所以移动舞台层会带动地图层一起移动。 2. **保持人物静止**：当人物到达屏幕中央时，通过移动舞台层而不是人物本身，来实现人物相对...
WebSocket是一种在客户端与服务器之间建立持久连接的网络协议，它允许双方进行全双工通信，即数据可以在两个方向上同时传输。WebSocket协议是HTML5的一部分，设计初衷是为了提供低延迟、高效率的实时通信，特别适合...
Android Studio是Google官方推出的Android应用开发集成开发环境（IDE），它是基于IntelliJ IDEA的，专为提升Android开发者的工作效率而设计。这个“Android Studio入门教程”将引导初学者掌握这款强大的工具，从而...
【标题】"新浪网五屏Flash+js左右翻牌广告代码"所涉及的知识点主要集中在网页广告设计与实现上，具体包括以下几个方面： 1. Flash技术：在早期的网页设计中，Flash是一种广泛用于创建动态内容和交互式用户体验的...
- **地址定位**：利用Google Maps的地址定位功能，开发者可以将物理地址转换为经纬度坐标，反之亦然。 - **周边搜索**：支持基于位置的服务（LBS），如搜索附近的餐厅、酒店等。 - **路线规划**：提供驾车、步行、...
这种技术允许用户在特定的输入框上通过鼠标或触摸事件模拟键盘输入，确保数据的安全性并增强界面的互动性。 在JavaScript中创建虚拟键盘主要涉及以下几个关键知识点： 1. **DOM操作**：使用JavaScript的DOM（文档...
7. **Google Sheets Script**：在`googlesheetsscript_js.txt`中，我们可以看到Google Apps Script的代码，它允许自定义Google Sheets的功能，如定时获取新数据、检查压力是否超出预设范围并发送通知。 8. **电路...
- 获取Google API KEY，并在配置文件中设置。 - 运行`npm run dev`启动开发服务器，查看和调试应用。 通过以上分析，我们可以看出"smurf"项目结合了现代前端技术，创建了一个具有互动性和实时性的冲浪预测应用。...
5. **编写HTML和JavaScript**：在`index.html`文件中，引入Sencha Touch库，并创建应用的基本结构。接着，在`app.js`中定义应用的配置和启动代码，以初始化Sencha Touch并加载你的视图。 6. **配置PhoneGap插件**：...
浏览器：谷歌浏览器 支持项目二次开发和定制，非诚勿扰！ 3.4系统流程的分析 12 3.4.1用户管理的流程 12 3.4.2个人中心管理流程 13 3.4.3登录流程 13 4系统设计 14 4.1软件功能模块设计 14 4.2数据库设计 14 4.2.1...
为确保脚本兼容IE、火狐、谷歌等主流浏览器，可能在编写过程中需要考虑不同浏览器对DOM操作和事件绑定的支持差异，并进行适当调整。 7. 用户体验优化： 通过`InitCss`函数，页面加载时会立即向用户展示密码输入的...
要使用Android Studio和Ionic进行Hybrid App开发，首先需要在系统上安装Node.js和npm（Node包管理器），然后安装Ionic和Cordova。接下来，可以在命令行中创建一个新的Ionic项目，并在Android Studio中导入该项目。在...
在JavaScript和JS（JavaScript的简称）技术栈中，创建一个全浏览器兼容的软键盘是一项挑战，因为不同的浏览器可能对DOM操作、事件处理或CSS样式的支持程度不同。IE5到9是一系列已经过时但可能在某些特定环境中仍需...
Steve Yegge在提及亚马逊与谷歌的区别时指出，尽管亚马逊在多个方面存在缺陷，但其对内部软件设计的重视和投资却非常出色。杰夫·贝索斯（Jeff Bezos）在2002年前后发布的命令改善了亚马逊的内部软件设计，并推动了...
由于屏幕像素与实际尺寸之间存在差异，特别是在地图应用中，需要将屏幕坐标转换为实际地理坐标。这通常涉及到地图投影和缩放系数的计算。例如，谷歌地图使用Mercator投影，需要将经纬度坐标转换为像素坐标，然后再...
谷歌是互联网上5大最受欢迎的网站之一，在全球范围内拥有无数的用户。谷歌更注重用户体验，较之百度更加的公平。谷歌收录页面比较的平稳，谷歌能够对网页的重要性做出客观的评价，PageRank并不计算直接链接的数量，...
解决方法通常包括使用JavaScript库如Modernizr来检测浏览器特性，或者通过JavaScript动态创建元素并设置内联样式，例如： ```javascript document.createElement('header'); ``` 底层实现是通过DOM API创建元素...