HTML5基础知识 - JavaScript API - Geolocation - 获取当前位置

使用navigator.geolocation获取用户当前位置结合地图显示提示信息。该实例演示需要能访问谷歌地图服务（意味着你需要有goagent或者其他VPN代理）。

geolocation

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1981
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var map;
var infowindow = new google.maps.InfoWindow();
var mapOptions = {
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition, onError);
  // also monitor position as it changes
  navigator.geolocation.watchPosition(showPosition);
} else {
  onError();
}

function showPosition(position) {
  map = new google.maps.Map(document.getElementById("content"), mapOptions);
  
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  
  initialLocation = new google.maps.LatLng(lat, lng);
  map.setCenter(initialLocation);
  infowindow.setContent(lat + " " + lng);
  infowindow.setPosition(initialLocation);
  infowindow.open(map);
}

编译

CSS

HTML

使用navigator.geolocation获取用户当前位置结合地图显示提示信息。该实例演示需要能访问谷歌地图服务（意味着你需要有goagent或者其他VPN代理）。

geolocation

编辑器支持Emmet

快捷键

使用navigator.geolocation获取用户当前位置结合地图显示提示信息。该实例演示需要能访问谷歌地图服务（意味着你需要有goagent或者其他VPN代理）。

geolocation

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：