编程 Javascript

js+html5获取用户地理位置信息并在Google地图上显示的方法

Posted in Javascript onJune 05, 2015

本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
 {
 if (navigator.geolocation)
  {
  navigator.geolocation.getCurrentPosition(showPosition,showError);
  }
 else{x.innerHTML="Geolocation is not supported by this browser.";}
 }
function showPosition(position)
 {
 var latlon=position.coords.latitude+","+position.coords.longitude;
 var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
 +latlon+"&zoom=14&size=400x300&sensor=false";
 document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
 }
function showError(error)
 {
 switch(error.code) 
  {
  case error.PERMISSION_DENIED:
   x.innerHTML="User denied the request for Geolocation."
   break;
  case error.POSITION_UNAVAILABLE:
   x.innerHTML="Location information is unavailable."
   break;
  case error.TIMEOUT:
   x.innerHTML="The request to get user location timed out."
   break;
  case error.UNKNOWN_ERROR:
   x.innerHTML="An unknown error occurred."
   break;
  }
 }
</script>
</body>
</html>

希望本文所述对大家的web程序设计有所帮助。

- Author -

pythoner

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K

Aug 19 Javascript

jquery实现textarea输入字符控制(仿微博输入控制字符)

Apr 26 Javascript

javascript中slice(),splice(),split(),substring(),substr()使用方法

Mar 13 Javascript

JavaScript转换二进制编码为ASCII码的方法

Apr 16 Javascript

javascript的BOM汇总

Jul 16 Javascript

jQuery基本选择器(实例及表单域value的获取方法)

May 20 Javascript

简单实现轮播图效果的实例

Jul 15 Javascript

Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案

Sep 15 Javascript

JS实现的简单四则运算计算器功能示例

Sep 27 Javascript

本地搭建微信小程序服务器的实现方法

Oct 27 Javascript

JavaScript中.min.js和.js文件的区别讲解

Feb 13 Javascript

Vue3 的响应式和以前有什么区别，Proxy 无敌？

May 20 Javascript

jquery插件NProgress.js制作网页加载进度条

Jun 05 #Javascript

JavaScript中toString()方法的使用详解

Jun 05 #Javascript

javascript实现倒计时并弹窗提示特效

Jun 05 #Javascript

jQuery插件EnPlaceholder实现输入框提示文字

Jun 05 #Javascript

基于jQuery+JSON的省市二三级联动效果

Jun 05 #Javascript

简介JavaScript中Boolean.toSource()方法的使用

Jun 05 #Javascript

判断访客终端类型集锦

Jun 05 #Javascript