html5通过坐标定位城市,HTML5如何获取地理经纬度并通过百度接口得到实时位置...

本篇教程探讨了HTML5如何获取地理经纬度并通过百度接口得到实时位置，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

注：用的时候将获取北京位置那放到获取经度纬度后面即可

-----------实际用的时候的代码如下：start  --------

var myCity;

getLocation()

function getLocation(){

//根据IP获取城市

myCity = new BMap.LocalCity();

var options={

enableHighAccuracy:true,

maximumAge:1000

}

if(navigator.geolocation){

//浏览器支持geolocation

navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

}else{

//浏览器不支持geolocation

console.log("浏览器不支持");

}

}

function onSuccess(position){

//position.coords.longitude;//经度

// position.coords.latitude;//纬度

console.log(position.coords.longitude)

setTimeout(function(){

myCity.get(getCityByIP);

},500)

}

//根据IP获取城市

function getCityByIP(rs) {

var cityName = rs.name;

console.log(rs)

alert("根据IP定位您所在的城市为:" + cityName);

}

//失败时

function onError(error){

switch(error.code){

case 1:

alert("位置服务被拒绝");

break;

case 2:

alert("暂时获取不到位置信息");

break;

case 3:

alert("获取信息超时");

break;

case 4:

alert("未知错误");

break;

}

}

------------------------ end ---------------------

https://blog.csdn.net/dreamboycx/article/details/52130772

html>

获取当前位置

html{height:100%}

body{height:100%;margin:0px;padding:0px}

#container{height:500px; width: 500px; margin: 0 auto;}

//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"

//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"

点击这个按钮，获得您的经纬度：

获取位置

var map;

var ggPoint;

var marker;

function getLocation(){

//根据IP获取城市

var myCity = new BMap.LocalCity();

myCity.get(getCityByIP);

var options={

enableHighAccuracy:true,

maximumAge:1000

}

if(navigator.geolocation){

//浏览器支持geolocation

navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

}else{

//浏览器不支持geolocation

console.log("浏览器不支持");

}

}

function onSuccess(position){

var longitude =position.coords.longitude;//经度

var latitude = position.coords.latitude;//纬度

document.getElementById("demo").innerHTML = "程序已获取你所在的位置为：
经度"+longitude+"，纬度"+latitude;

//--------------设置地图显示----------------

map = new BMap.Map("container"); // 创建地图实例

ggPoint = new BMap.Point(longitude, latitude); // 创建点坐标

map.centerAndZoom(ggPoint, 15); // 初始化地图，设置中心点坐标和地图级别

//--------------设置地图显示----------------

var convertor = new BMap.Convertor();

var pointArr = [];

pointArr.push(ggPoint);

convertor.translate(pointArr, 1, 5, translateCallback);

//--------------设置标注相关-------------------

/*var marker = new BMap.Marker(point); // 创建点

map.addOverlay(marker);

marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

marker.enableDragging();//设置点可拖动

//--------------设置标注相关---------------------

//--------------获取地理位置---------------------

var geoc = new BMap.Geocoder();

geoc.getLocation(point, function(rs){

var addComp = rs.addressComponents;

alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

});*/

//--------------获取地理位置----------------------

}

//坐标转换完之后的回调函数

function translateCallback(data){

if(data.status === 0) {

marker = new BMap.Marker(data.points[0]);

map.addOverlay(marker);

marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

marker.enableDragging();//设置点可拖动

marker.addEventListener("dragend",getAttr);

//alert(marker.getPosition());

map.setCenter(data.points[0]);

getPosit(data.points[0]);

}

}

function getAttr(){

var p = marker.getPosition(); //获取marker的位置

//alert("marker的位置是" + p.lng + "," + p.lat);

getPosit(new BMap.Point(p.lng, p.lat));

}

function getPosit(obj){

var geoc = new BMap.Geocoder();

geoc.getLocation(obj, function(rs){

var addComp = rs.addressComponents;

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

var address = "您的地址：" + addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + "," + addComp.streetNumber;

document.getElementById("position").innerHTML = address;

//var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });

//marker.setLabel(labelbaidu); //添加百度标注

});

}

//根据IP获取城市

function getCityByIP(rs) {

var cityName = rs.name;

alert("根据IP定位您所在的城市为:" + cityName);

}

//失败时

function onError(error){

switch(error.code){

case 1:

alert("位置服务被拒绝");

break;

case 2:

alert("暂时获取不到位置信息");

break;

case 3:

alert("获取信息超时");

break;

case 4:

alert("未知错误");

break;

}

}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！