手机js页面实现一键定位，并且把获取的地理位置显示到文本框中代码？

2023-04-21 18:00:02JavaScript027

手机js页面实现一键定位，并且把获取的地理位置显示到文本框中代码？,第1张

手机js页面实现一键定位，并且把获取的地理位置显示到文本框中代码如下：

var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数，errorFunc获取定位失败回调

//首先设置默认城市

var defCity = {

id: '000001',

date: curDateTime()//获取当前时间方法

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' })

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function (position) {

var lat = position.coords.latitude

var lon = position.coords.longitude

//var map = new BMap.Map("container") // 创建Map实例

var point = new BMap.Point(lon, lat)// 创建点坐标

var gc = new BMap.Geocoder()

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents

var curCity = {

id: '',

date: curDateTime()

}

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })

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

if (successFunc != undefined)

successFunc(addComp)

})

function (error) {

switch (error.code) {

case 1:

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

break

case 2:

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

break

case 3:

alert("获取位置信息超时。")

break

default:

alert("未知错误。")

break

}

var curCity = {

id: '000001',

date: curDateTime()

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })

if (errorFunc != undefined)

errorFunc(error)

}, { timeout: 5000, enableHighAccuracy: true })

} else {

alert("你的浏览器不支持获取地理位置信息。")

if (errorFunc != undefined)

errorFunc("你的浏览器不支持获取地理位置信息。")

}

var showPosition = function (position) {

var lat = position.coords.latitude

var lon = position.coords.longitude

//var map = new BMap.Map("container") // 创建Map实例

var point = new BMap.Point(lon, lat)// 创建点坐标

var gc = new BMap.Geocoder()

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents

var curCity = {

id: '',

date: curDateTime()

}

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })

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

})

}

var showPositionError = function (error) {

switch (error.code) {

case 1:

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

break

case 2:

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

break

case 3:

alert("获取位置信息超时。")

break

default:

alert("未知错误。")

break

}

var curCity = {

id: '000001',

date: curDateTime()

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })

}

一、PC端通过IP实现定位代码

document.write(IPData[0]) //显示IP地址

document.write(IPData[2]) //显示省

document.write(IPData[3]) //显示市

</script>

二、获取客户端地址代码

var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random()

$.getJSON(url, function(data) {

alert(data.Ip)

})

</script>

手机WEB定位方法：代码。

var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数，errorFunc获取定位失败回调

//首先设置默认城市

var defCity = {

id: '000001',

date: curDateTime()//获取当前时间方法

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' })

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function (position) {

var lat = position.coords.latitude

var lon = position.coords.longitude

//var map = new BMap.Map("container") // 创建Map实例

var point = new BMap.Point(lon, lat)// 创建点坐标

var gc = new BMap.Geocoder()

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents

var curCity = {

id: '',

date: curDateTime()

}

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })

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

if (successFunc != undefined)

successFunc(addComp)

})

function (error) {

switch (error.code) {

case 1:

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

break

case 2:

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

break

case 3:

alert("获取位置信息超时。")

break

default:

alert("未知错误。")

break

}

var curCity = {

id: '000001',

date: curDateTime()

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })

if (errorFunc != undefined)

errorFunc(error)

}, { timeout: 5000, enableHighAccuracy: true })

} else {

alert("你的浏览器不支持获取地理位置信息。")

if (errorFunc != undefined)

errorFunc("你的浏览器不支持获取地理位置信息。")

}

var showPosition = function (position) {

var lat = position.coords.latitude

var lon = position.coords.longitude

//var map = new BMap.Map("container") // 创建Map实例

var point = new BMap.Point(lon, lat)// 创建点坐标

var gc = new BMap.Geocoder()

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents

var curCity = {

id: '',

date: curDateTime()

}

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })

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

})

}

var showPositionError = function (error) {

switch (error.code) {

case 1:

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

break

case 2:

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

break

case 3:

alert("获取位置信息超时。")

break

default:

alert("未知错误。")

break

}

var curCity = {

id: '000001',

date: curDateTime()

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })

前提要引入百度API：<script src="http://api.map.baidu.com/api?v=1.4"

type="text/javascript"></script>。

2. PC端通过IP实现方法：

采用腾讯提供的接口，这个目前已经不能使用。

document.write(IPData[0]) //显示IP地址

document.write(IPData[2]) //显示省

document.write(IPData[3]) //显示市

</script>

3 . 获取客户端IP方法

var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random()

$.getJSON(url, function(data) {

alert(data.Ip)

})

</script>

其实有了 Haversine 公式，两点坐标之后就很简单了。你提供的上海范围太大，且没有坐标，下面例子以上海虹桥机场为参考（纬度：31.2，经度：121.4）。

要从地名获得它的经纬度应该需要有一个庞大的数据库，这点没有仔细研究过。谷歌地图应该会提供此类的 API。你可以百度一下"经纬度查询"，有很多网站提供此功能。

测试的时候最好用 IE9 或 Opera 高版本，Firefox 和 Safari 有时会获取不到地理位置，Chrome 会自动屏蔽本地文件。

// Haversine 公式

function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {

var R = 6371

var dLat = deg2rad(lat2 - lat1)

var dLon = deg2rad(lon2 - lon1)

var a =

Math.sin(dLat / 2) * Math.sin(dLat / 2) +

Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *

Math.sin(dLon / 2) * Math.sin(dLon / 2)

var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))

var d = R * c

return d

}

function deg2rad(deg) {

return deg * (Math.PI / 180)

}

// 上海虹桥机场经纬度

var lat = 31.2, lon = 121.4

// 尝试获取地理位置

if(navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(pos) {

var d = getDistanceFromLatLonInKm(

pos.coords.latitude,

pos.coords.longitude,

lat, lon).toFixed(2)

alert("当前位置距上海虹桥机场：" + d + "公里")

})

}

else {

alert("浏览器不支持 geolocation")

}

</script>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：css样式如何控制div到最顶层

# 下一篇：桌面工具栏怎么还原？

推荐阅读

热门文章

最新发布

标签列表

手机js页面实现一键定位，并且把获取的地理位置显示到文本框中代码？

给您推荐相同类型的内容：