navigator.geolocation 获取城市获取的是什么坐标

& & & html5为window.navigator提供了geolocation属性,用于获取基于浏览器的当前用户地理位置。
& & & window.navigator.geolocation提供了3个方法分别是: & & &
void getCurrentPosition(onSuccess,onError,options);//获取用户当前位置int watchCurrentPosition(onSuccess,onError,options);//持续获取当前用户位置void clearWatch(watchId);//watchId 为watchCurrentPosition返回的值//取消监控options = {
enableHighAccuracy,//boolean 是否要求高精度的地理信息
timeout,//获取信息的超时限制
maximumAge//对地理信息进行缓存的时间}//options可以不写,为默认即可
二、position对象
& & & 当成功获取地理位置信息时候,onsuccess方法中会返回position对象,通过这个对象可以获取地理位置的相关信息,包括:
position对象的属性: latitude,//纬度longitude,//经度altitude,//海拔高度accuracy,//获取纬度或者经度的精度altitudeAccurancy,//海拔高度的精度heading,//设备前景方向。正北方向的顺时针旋转角speed,//设备的前进速度 m/stimestamp,//获取地理位置信息时候的时间
三、基于google map的例子
& & & 直接看代码:
&!DOCTYPE HTML&&html lang="en"&&head&
&meta charset="UTF-8"&
&title&在页面上使用google地图示例&/title&&/head&&body onload = 'init()'&
&div id="map" style='width:800height:800'&&/div&
&script type="text/javascript" src='/maps/api/js?sensor=false'&&/script&
&script type="text/javascript"&
function init(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(pos){
var coords = pos.
var latlng =new google.maps.LatLng(coords.latitude,coords.longitude);
var options = {zoom:14,center:latlng,mapTypeId : google.maps.MapTypeId.ROADMAP};
map1 =new google.maps.Map(document.getElementById('map'),options);
var marker =new google.maps.Marker({
position : latlng,
map : map1
var infowindow =new Window({
content : '当前位置!'
infowindow.open(map1,marker);
&/body&&/html&
阅读(...) 评论()HTML5获取地理位置及百度地图展示实例_html5_ThinkSAAS
HTML5获取地理位置及百度地图展示实例
HTML5获取地理位置及百度地图展示实例
内容来源: 网络
这两天在看在移动端通过浏览器获取地理位置的相关方法,顺便深入了解一下百度地图API的相关功能。
测试实例包含了以下功能:
(1)通过IP地址获取城市地址(并不完全准确,存在代理IP或IP中转时定位与实际位置不一致的情况)
(2)通过移动端浏览器及GPS定位位置坐标
(3)根据位置坐标转换百度地图坐标
(4)根据位置坐标逆推城市具体地址功能(存在一定误差)
(5)通过使用百度API展示地理位置及添加标注功能
&!DOCTYPE html&
&meta charset="utf-8"&
&title&地理位置测试&/title&
&script type="text/javascript" src="/get/http://api./api?v=1.3"&&/script&
&script type="text/javascript" src="/get//map/jsdemo/demo/convertor.js"&&/script&
&script type="text/javascript"&
var baiduP
var baiduA
function getLocation() {
//根据IP获取城市
var myCity = new BMap.LocalCity();
myCity.get(getCityByIP);
//获取GPS坐标
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap, handleError, { enableHighAccuracy: true, maximumAge: 1000 });
alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
function showMap(value) {
var longitude = value.coords.
var latitude = value.coords.
map = new BMap.Map("map");
//alert("坐标经度为:" + latitude + ", 纬度为:" + longitude );
gpsPoint = new BMap.Point(longitude, latitude);
// 创建点坐标
map.centerAndZoom(gpsPoint, 15);
//根据坐标逆解析地址
var geoc = new BMap.Geocoder();
geoc.getLocation(gpsPoint, getCityByCoordinate);
BMap.Convertor.translate(gpsPoint, 0, translateCallback);
translateCallback = function (point) {
baiduPoint =
var geoc = new BMap.Geocoder();
geoc.getLocation(baiduPoint, getCityByBaiduCoordinate);
function getCityByCoordinate(rs) {
gpsAddress = rs.addressC
var address = "GPS标注:" + gpsAddress.province + "," + gpsAddress.city + "," + gpsAddress.district + "," + gpsAddress.street + "," + gpsAddress.streetN
var marker = new BMap.Marker(gpsPoint);
// 创建标注
map.addOverlay(marker);
// 将标注添加到地图中
var labelgps = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
marker.setLabel(labelgps); //添加GPS标注
function getCityByBaiduCoordinate(rs) {
baiduAddress = rs.addressC
var address = "百度标注:" + baiduAddress.province + "," + baiduAddress.city + "," + baiduAddress.district + "," + baiduAddress.street + "," + baiduAddress.streetN
var marker = new BMap.Marker(baiduPoint);
// 创建标注
map.addOverlay(marker);
// 将标注添加到地图中
var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
marker.setLabel(labelbaidu); //添加百度标注
//根据IP获取城市
function getCityByIP(rs) {
var cityName = rs.
alert("根据IP定位您所在的城市为:" + cityName);
function handleError(value) {
switch (value.code) {
alert("位置服务被拒绝");
alert("暂时获取不到位置信息");
alert("获取信息超时");
alert("未知错误");
function init() {
getLocation();
window.onload =
&div id="map" style="width:600height:600"&&/div&
&/html&以手机UC浏览器测试正常。需要授权浏览器获取位置权限。更多实例可参考百度API:/map/jsdemo.htm
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权:
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好,把建议拿来。
开发客服微信

我要回帖

更多关于 vz navigator是什么 的文章

 

随机推荐