现在lbs服务比较火，基本上都需要定位用户的地理信息，用户地理信息一般是通过gps来定位实现的，那么假如
用户的gps坏了，或者没有开启，那么怎么获得用户的地理信息的呢？替代的办法就是可以获得手机真实ip信息来大致获取手机用户的
大概位置，虽然不是很精确，但是在精确度不高的情况下可以临时代替一下，本文就是实现如何通过ip来定位用户的。这里主要使用获得pc端模拟手机端原理
使用工具：
地图：谷歌地图Google Maps JavaScript API V3
首先介绍一下谷歌地图定位地理信息的原理：根据经纬度查询出用户的地理信息，====gps可以获得经纬度。
也可以使用谷歌的共享地理位置信息 ，例如火狐的有http://www.mozilla.com/zh-CN/firefox/geolocation/可以体验一下共享地理信息，不过那个技术是基于w3c标准的，目前ie还不是支持。
本文要实现的：根据ip 查询获得ip的地理信息 和在地图中的显示
设计思想：获得ip信息--->查询到ip地理位置（如杭州 北京等，这个有两种方法一种是使用ip数据库，另外一种是门户网站接口）
----->根据获得的地理信息，谷歌把他转化为经纬度---->经纬度定位
本次修改增加了弹出信息窗口和 事件监听方法（监听经纬值）还是 在地图中显示图像功能
1：获得用户ip信息
这里推荐使用腾讯的ip开放接口，地理信息比较全，获得ip信息的更详细介绍
这个带有查询ip功能的方法，手机获得手机端ip信息传到这个方法，获取到地理位置
1. //根据腾讯接口查询ip地址
2. function getIPLoc($queryIP){
3.
4.
5. $url = 'http://ip.qq.com/cgi-bin/searchip?searchip1='.$queryIP;
6.
7.
8. $ch = curl_init($url);
9.
10.
11. curl_setopt($ch,CURLOPT_ENCODING ,'gb2312');
12.
13.
14. curl_setopt($ch, CURLOPT_TIMEOUT, 10);
15.
16.
17. curl_setopt($ch, CURLOPT_RETURNTRANSFER, true) ; // 获取数据返回
18.
19.
20. $result = curl_exec($ch);
21.
22.
23. $result = mb_convert_encoding($result, "utf-8", "gb2312"); // 编码转换，否则乱码
24.
25.
26. curl_close($ch);
27.
28.
29. preg_match("@<span>(.*)</span></p>@iU",$result,$ipArray);
30. $loc = $ipArray[1];
31. return $loc;
32. }
这是直接获得pc端的方法，至于手机端如何获得用户ip，网上找一下方法有很多
1. //方法2 直接获得客户端ip地址
2. function getIpPlace(){
3. $ip=file_get_contents("http://fw.qq.com/ipaddress");
4. $ip=str_replace('"',' ',$ip);
5. $ip2=explode("(",$ip);
6. $a=substr($ip2[1],0,-2);
7. $b=explode(",",$a);
8. return $b;
9. }
2：调用谷歌地图
引入地图
1. <script type="text/javascript" src="http://ditu.google.com/maps/api/js?sensor=true"></script>
设置谷歌地图的参数
zoom是地图显示的缩放级数，center是地图的中心位置，maptypeid是地图的类型，address主要获取查询到的地理信息，
gecode主要是谷歌地图吧地理信息转化为经度纬度值，title主要是点击时候的名称，icon主要是锚点的背景图像，没有的话就是是默认值
1. <script language="javascript">
2. var geocoder;
3. var map;
4. function initialize() {
5. geocoder = new google.maps.Geocoder();
6. var latlng = new google.maps.LatLng(39.9493, 116.3975);
7. var myOptions = {
8. zoom: 15,
9. center: latlng,
10. mapTypeId: google.maps.MapTypeId.ROADMAP
11. }
12. var address = document.getElementById("address").value;
13. var img='http://avatar.cs.net/B/9/A/1_youacai.jpg';
14. if (geocoder) {
15. geocoder.geocode( { 'address': address}, function(results, status) {
16. if (status == google.maps.GeocoderStatus.OK) {
17. map.setCenter(results[0].geometry.location);
18. var marker = new google.maps.Marker({
19. map: map,
20. position: results[0].geometry.location,
21. title:'位置',
22. icon:img
23.
24. });
25. }
26. });
27. }
28. map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
29. }
弹出信息窗口
content是提示信息，它支持自定义的DOM样式，监听事件了有演示
open是打开窗口，相应的close是关闭窗口
1. /*弹出信息窗口*/
2. function getInfor(map,marker,address,ln){
3. var infowindow = new google.maps.InfoWindow({
4. content: address+"\n"+ln
5. });
6. infowindow.open(map,marker);
7. }
监听事件
主要是监听鼠标对地图的操作，跟js很相似
本文演示的是点击的事件，
pixeloffset是指窗口相对应焦点的位置偏移量
google.maps.event.addListener(marker, 'click', function(event)监听点击事件，焦点是marker也就是背景图像的地方，
alert弹出对应焦点的经纬信息
1. /*监听事件 经纬值*/
2. function addListener(marker){
3. var infowindow = new google.maps.InfoWindow({
4. content:'<div style="color:#F00"><a href="http://blog.cs.net/youacai">php淮北<img src="http://avatar.cs.net/B/9/A/1_youacai.jpg" width="30" height="30" alt="tt"></a> 点点试试哦</div>',
5. pixelOffset:({width:50, height:120})
6. });
7. google.maps.event.addListener(marker, 'click', function(event) {
8. alert("你选择的经度是："+event.latLng.lat()+" 纬度是："+event.latLng.lat());
9. infowindow.open(map,marker);
10. });
11. }
放置谷歌地图的容器
1. <div id="map_canvas" style="width: 320px; height: 480px;"></div>
3：附带一个查询天气的接口
1. /*获得天气预报信息*/
2. <br/>
3. <iframe src="http://weather.265.com/weather.htm" width="168" height="54" frameborder="no" border="0" marginwidth="0&quoat; marginheight="0" scrolling="no"></iframe>
1. <pre name="code" class="php"><?php
2. //根据腾讯接口查询ip地址
3. function getIPLoc($queryIP){
4.
5.
6. $url = 'http://ip.qq.com/cgi-bin/searchip?searchip1='.$queryIP;
7.
8.
9. $ch = curl_init($url);
10.
11.
12. curl_setopt($ch,CURLOPT_ENCODING ,'gb2312');
13.
14.
15. curl_setopt($ch, CURLOPT_TIMEOUT, 10);
16.
17.
18. curl_setopt($ch, CURLOPT_RETURNTRANSFER, true) ; // 获取数据返回
19.
20.
21. $result = curl_exec($ch);
22.
23.
24. $result = mb_convert_encoding($result, "utf-8", "gb2312"); // 编码转换，否则乱码
25.
26.
27. curl_close($ch);
28.
29.
30. preg_match("@<span>(.*)</span></p>@iU",$result,$ipArray);
31. $loc = $ipArray[1];
32. return $loc;
33. }
34.
35.
36. //方法2 直接获得客户端ip地址
37. function getIpPlace(){
38. $ip=file_get_contents("http://fw.qq.com/ipaddress");
39. $ip=str_replace('"',' ',$ip);
40. $ip2=explode("(",$ip);
41. $a=substr($ip2[1],0,-2);
42. $b=explode(",",$a);
43. return $b;
44. }
45. $ip=getIpPlace();
46. $address =!empty($ip['3'])? iconv('gbk','utf-8',$ip['3']):'';
47.
48. //获得提交的ip信息
49. if($_POST){
50. $ip = trim($_POST['ip']);
51. $loc = trim(getIPLoc($ip));
52. $locip = trim($_POST['ip']);
53. }else{
54. $ip=getIpPlace();
55. $loc =!empty($ip['3'])? iconv('gbk','utf-8',$ip['3']):'';
56. $locip = iconv('gbk','utf-8',$ip['0']);
57. }
58.
59.
60. ?>
61. <!--调用谷歌地图js，zoom缩放倍数，center中心，mapTypeId地图类型-->
62. <script type="text/javascript" src="http://ditu.google.com/maps/api/js?sensor=true"></script>
63. <script language="javascript">
64. var geocoder;
65. var map;
66. function initialize() {
67. geocoder = new google.maps.Geocoder();
68. var latlng = new google.maps.LatLng(39.9493, 116.3975);
69. var myOptions = {
70. zoom: 15,
71. center: latlng,
72. mapTypeId: google.maps.MapTypeId.ROADMAP
73. }
74. var address = document.getElementById("address").value;
75. <span style="white-space:pre"> </span>var img='http://avatar.c.net/B/9/A/1_youacai.jpg';
76. <span style="white-space:pre"> </span>
77. if (geocoder) {
78. geocoder.geocode( { 'address': address}, function(results, status) {
79. if (status == google.maps.GeocoderStatus.OK) {
80. map.setCenter(results[0].geometry.location);
81. var marker = new google.maps.Marker({
82. map: map,
83. position: results[0].geometry.location,
84. <span style="white-space:pre"> </span> title:'位置',
85. <span style="white-space:pre"> </span> icon:img
86.
87. });
88. <span style="white-space:pre"> </span> getInfor(map,marker,address,results[0].geometry.location);
89. <span style="white-space:pre"> </span> addListener(marker)
90. }
91. });
92. }
93. map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
94. }
95.
96. /*弹出信息窗口*/
97. function getInfor(map,marker,address,ln){
98. <span style="white-space:pre"> </span>var infowindow = new google.maps.InfoWindow({
99. <span style="white-space:pre"> </span>content: address+"\n"+ln
100. <span style="white-space:pre"> </span> });
101. <span style="white-space:pre"> </span>infowindow.open(map,marker);
102. <span style="white-space:pre"> </span>
103. }
104. /*监听事件 经纬值*/
105. function addListener(marker){
106. <span style="white-space:pre"> </span> var infowindow = new google.maps.InfoWindow({
107. <span style="white-space:pre"> </span>content:'<div style="color:#F00"><a href="http://blog.cs.net/youacai">php淮北<img src="http://avatar.cs.net/B/9/A/1_youacai.jpg" width="30" height="30" alt="tt"></a> 点点试试哦</div>',
108. <span style="white-space:pre"> </span>pixelOffset:({width:50, height:120})
109. <span style="white-space:pre"> </span> });
110. <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>google.maps.event.addListener(marker, 'click', function(event) {
111. alert("你选择的经度是："+event.latLng.lat()+" 纬度是："+event.latLng.lat());
112. <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>infowindow.open(map,marker);
113. <span style="white-space:pre"> </span>});
114. <span style="white-space:pre"> </span> }
115.
116. </script> </pre><pre name="code" class="php"><body οnlοad="initialize()">
117. <div id="map_canvas" style="width: 320px; height: 480px;"></div>
118. <div>
119. <form method="post" action="">
120. 输出ip地址：<input type="text" name="ip" value=<?php echo $locip;?>>
121. <input type="submit" value="提交">
122.
123.
124. </form>
125. 位置： <input type="text" id="address" size="40" value=<?php echo $loc;?> >
126. </div>
127. /*获得天气预报信息*/
128. <br/>
129. <iframe src="http://weather.265.com/weather.htm" width="168" height="54" frameborder="no" border="0" marginwidth="0&quoat; marginheight="0" scrolling="no"></iframe>
130. </body></pre><br>
131. <br>
132. <pre></pre>
133. <p><img src="http://hi.cs.net/attachment/201107/26/0_1311670654lAwz.gif" alt=""><img src="http://hi.cs.net/attachment/201107/26/0_1311671145nMMo.gif" alt=""></p>
134. <p></p>
135. <p></p>
136. <p></p>
137. <p>上面是查询前后的截图 </p>
138. <pre></pre>
139. <pre></pre>
140. <pre></pre>
141. <pre></pre>
