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

JavaScript013

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

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

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

//首先设置默认城市

var defCity = {

id: '000001',

name: '北京市',

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: '',

name: addComp.province,

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',

name: '北京市',

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: '',

name: addComp.province,

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',

name: '北京市',

date: curDateTime()

}

//默认城市

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

}

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

<script type="text/javascript" src="http://fw.qq.com/ipaddress"></script>

<script type="text/javascript">

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

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

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

</script>

二、获取客户端地址代码

<script>

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

$.getJSON(url, function(data) {

alert(data.Ip)

})

</script>

滚动条，顾名思义，就是可以滚动的条（ScrollBar）。准确地说，滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候，为了能够让有限的空间展示无限的内容所作出的一个妥协的元素，使用它可以让我们查看当前页面内容之外部分的内容。

说到这里您估计都还很清楚，但既然我说滚动条也是一个元素，那么它是不是也在我们的HTML中呢？又或者它是浏览器的固有的一部分？

如果您觉得它是HTML中的一部分，那么您就对了，因为它是依附容器而存在的，而默认产生滚动条的容器是<body></body>或者<html></html>节，它并不是浏览器固有的一部分，浏览器只是默认完整展示了一整个html文档，并不知道它中间的内容究竟是否需要滚动条的支持。

那么让我们回顾上面的那几行代码吧，假设fixed对您当前（失败）的浏览器无效的话，那么我们来看看它们的结构，外面是html标签，向内是body标签，再向内则是div标签，div标签很明显是它们的一部分，这样假设我们的div标签所设置的定位属性无论如何（四个可能的属性皆没起到什么作用）改变不了自身显示状况。我们能否更换一个思路呢？

刚才我说了，滚动条是容器所固有的，不管是外面那个滚动条，还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢？

看到滚动条的控制可以通过CSS的overflow的几个属性来控制，想必大家都不陌生了。（陌生的朋友点击相关链接即可进入查看）

那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢？

<html>

02.

<head>

03.

<title></title>

04.

<style type="text/css">

05.

06.

html,body {

07.

overflow:hidden

08.

margin:0px

09.

width:100%

10.

height:100%

11.

}

12.

13.

.virtual_body {

14.

width:100%

15.

height:100%

16.

overflow-y:scroll

17.

overflow-x:auto

18.

}

19.

20.

.fixed_div {

21.

position:absolute

22.

z-index:2008

23.

bottom:20px

24.

left:40px

25.

width:800px

26.

height:40px

27.

border:1px solid red

28.

background:#e5e5e5

29.

}

30.

</style>

31.

</head>

32.

33.

<body>

34.

<div class="fixed_div">I am still here!</div>

35.

<div class="virtual_body">

36.

<div style="height:888px">

37.

I am content !

38.

</div>

39.

</div>

40.

</body>

41.

</html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>光标位置</title>

<style>

INPUT{border: 1 solid #000000}

BODY,TABLE{font-size: 10pt}

</style>

</head>

<body>

<table border="0" width="700" cellspacing="0" cellpadding="0">

<tr>

<td width="479" rowspan="7">

点击 TextArea 实现光标定位

<p>

<textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸

为了你我愿意

动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离

如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹

也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里

我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离

</textarea>

<script>

function movePoint()

{

var pn = parseInt(pnum.value)

if(isNaN(pn))

return

var rng = box.createTextRange()

rng.moveStart("character",pn)

rng.collapse(true)

rng.select()

returnCase(rng)

}

function tellPoint()

{

var rng = event.srcElement.createTextRange()

rng.moveToPoint(event.x,event.y)

rng.moveStart("character",-event.srcElement.value.length)

pnum.value = rng.text.length

returnCase(rng)

}

function returnCase(rng)

{

bh.innerText = rng.boundingHeight

bl.innerText = rng.boundingLeft

bt.innerText = rng.boundingTop

bw.innerText = rng.boundingWidth

ot.innerText = rng.offsetTop

ol.innerText = rng.offsetLeft

t.innerText = rng.text

}

function selectText(sp,ep)

{

sp = parseInt(sp)

ep = parseInt(ep)

if(isNaN(sp)||isNaN(ep))

return

var rng = box.createTextRange()

rng.moveEnd("character",-box.value.length)

rng.moveStart("character",-box.value.length)

rng.collapse(true)

rng.moveEnd("character",ep)

rng.moveStart("character",sp)

rng.select()

returnCase(rng)

}

var rg = box.createTextRange()

function findText(tw)

{

if(tw=="")

return

var sw = 0

if(document.selection)

{

sw = document.selection.createRange().text.length

}

rg.moveEnd("character",box.value.length)

rg.moveStart("character",sw)

if(rg.findText(tw))

{

rg.select()

returnCase(rg)

}

if(rg.text!=tw)

{

alert("已经搜索完了")

rg = box.createTextRange()

}

}

</script>

</p>

<p></p>

光标位置：<input type="text" value="0" id="pnum" size="8"><input type="button" onclick="movePoint()" value="移动光标到指定位置">

<p></p>

选择指定范围：<input type="text" size="9" id="sbox">-- <input type="text" size="9" id="ebox"><input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择">

<p></p>

选择查找字符 ：<input type="text" value="" id="cbox" size="8"><input type="button" onclick="findText(cbox.value)" value="查找下一个并选择">

</td>

<td width="217">boundingHeight: <span id="bh"></span></td>

</tr>

<tr>

<td width="217">boundingWidth: <span id="bw"></span></td>

</tr>

<tr>

<td width="217">boundingTop: <span id="bt"></span></td>

</tr>

<tr>

<td width="217">boundingLeft: <span id="bl"></span></td>

</tr>

<tr>

<td width="217">offsetLeft: <span id="ol"></span></td>

</tr>

<tr>

<td width="217">offsetTop: <span id="ot"></span></td>

</tr>

<tr>

<td width="217">text: <span style="position: absolutez-index: 10" id="t"></span></td>

</tr>

</table>

</body>

</html>