标签为 "google Map" 的文章

使用navigator.geolocation来获取用户的地理位置信息

三水清 2011-01-26 23:25:055 Comments

W3C 中新添加了一个名为 Geolocation的 API 规范，Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来简单的获取用户的地理位置信息。本文中将简单介绍下W3C的Geolocation。

Geolocation在javascript的navigator 对象中，我们可以通过 navigator.geolocation 来使用它。不支持 geolocation 的浏览器并不包含这一对象，那么可以通过下面的代码来做能力检测，对不同的浏览器做不同的处理。

if (navigator.geolocation) {
        alert( ' 浏览器支持 geolocation ' );
}else{
        alert( ' 浏览器不支持 geolocation ' );
}

在访问 geolocation 对象时，即调用 geolocation 下面的方法时，浏览器会弹出提示，询问用户是否许可网站提供的位置服务，只有在得到用户许可过后，服务才会继续，否则将被停止，在稍后你将会了解到，我们能够捕获到用户拒绝服务的动作。下面这张图分别是 Chrome , Firefox 和 Opera 在初次访问 geolocation 时，给用户的提示：

初次使用geolocation时的警告框

初次使用geolocation时的警告框

常用的navigator.geolocation对象有以下三种方法：

  1. 获取当前地理位置：navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
  2. 持续获取地理位置：navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
  3. 清除持续获取地理位置事件：navigator.geolocation.clearWatch(watch_position_id)

其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项，由JSON格式传入：

  1. enableHighAccuracy：true/false，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true，在这种情况下，浏览器会尽可能地进行更为精确的查询，简单地说，如果用户有可用的 GPS 设备，会返回 GPS 设备的查询结果，IP 是最后的选择，对于移动设备来说，网络接入点(基站)或许成为另一个选择，对此我还没有完全了解，但根据测试，即时没有任何额外功能的手机，也能够得到更为精确的查询结果。
  2. maximumAge：单位毫秒，告诉设备缓存时间，主要用于设备的省电或者节省带宽方面。
  3. timeout：单位毫秒，超时事件，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。

例如下面的代码：

var geo=navigator.geolocation.getCurrentPosition(geo_success, geo_error, {enableHighAccuracy:true, 
    maximumAge:30000, 
    timeout:27000});

继续阅读全文……

利用GControl和GLayer对象在地图上显示panoramio图片

三水清 2010-06-28 16:39:02快抢沙发

今天是Google map api的关于利用GControl和GLayer对象在地图上显示panoramio图片的教程，昨天我写了一篇Google map api的教程是关于在地图上添加控制按钮的（Google Map API教程之使用GControl对象在地图上添加control按钮），今天结合上篇文章，写一下怎么在地图上加一个可以显示panoramio的图片，使用的主要对象是GControl和GLayer对象。关于GControl对象的官方文档（请点这里），GLayer对象的官方文档（请点这里）

使用GLayer创建图片层对象

我们可以通过以下代码创建一个panoramio.com的图片层：
photoLayer=new GLayer("com.panoramio.all")
然后通过Gmap.addOverlay(photoLayer)添加这个层

谷歌地图的API支持的GLayer对象有谷歌webcam、panoramio、维基百科等，更多支持请点击查看：http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag
继续阅读全文……

Google Map API教程之使用GControl对象在地图上添加control按钮

三水清 2010-06-27 19:45:251 Comment

今天查看我网站的地图已经被谷歌收录了5900条，而百度也开始收录了，很欣慰~再接再厉，今天写的这一篇Google map api教程是关于在Google地图上添加control按钮的，用到的是Google Map API的GControl对象，通过initialize的方法插入一个div到地图上，再通过new GControlPosition设置按钮的位置，最后通过Gmap的addControl方法添加这个按钮。最终效果截图如下：

control

实现方法原理分析

首先建立一个GControl的原型control，然后定义其initialize 方法：主要是建立一个div，并且制定div的onclick事件，最后通过gmap.getContainer().appendChild(buttonDiv)插入到地图中去。
最后定义getDefaultPosition的方法，通过GControlPosition对象设置按钮所在地图的具体位置。
继续阅读全文……

Google Map API教程之如何自动缩放级别（setAutoZoom）

三水清 2010-06-24 18:55:355 Comments

最近花了两晚上的时间写了一个google地图的应用程序，采用了map api，weather api，localsearch api，我想的是有空写一些关于Google Map API的文章，今天就写一个关于自动缩放地图到合适级别的方法，这里说的自动缩放，指的是地图上已经加入了很多Gmarker点，而这些点任何地方都有，我们为了要它们在地图上能够都显示出来，必须要个Google Map设置一个合适的缩放级别和中心点，这里用的方法是Google Map API的GLatLngBounds。

假设我们创建的Google Map对象为gmap = new GMap2()，我们添加所有GMarker都保存在一个名字为markers的数组里，它们的点遍布各地，我们要做的就是要这些点都在地图上显示出来，也就是自动缩放地图（set auto zoom）。

继续阅读全文……

php获取来访者IP信息

三水清 2010-03-23 05:25:347 Comments

前几天幼学笔记写了一篇《可以在前端实现的几个地理位置小功能》里面提到了我使用的QQ ip接口，其实我们也可以在PHP端实现根据IP定位用户地理位置，方法就是根据纯真的IP库来获取IP地理信息。我一个Google map API逆经纬度查询结合IP数据库接口的demo[点击查看]，其实使用的方法就是Ajax过去IP，通过QQ IP接口查询出来地理信息，然后调用Google map API逆经纬度查询经纬度信息，然后在Google地图上标注地理位置。

1、PHP获取来访者IP函数getIP()

function getIP()
{ 
        if(getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")) 
                $ip = getenv("HTTP_CLIENT_IP"); 
        elseif(getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")) 
                $ip = getenv("HTTP_X_FORWARDED_FOR"); 
        elseif (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")) 
                $ip = getenv("REMOTE_ADDR"); 
        elseif (isset($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")) 
                $ip = $_SERVER['REMOTE_ADDR']; 
        else 
                $ip = "0.0.0.0"; 
        return $ip;
}

继续阅读全文……

php、js两种不同方式根据关键词返回经纬度接口【基于Google map API】

三水清 2009-11-21 00:21:093 Comments

P.S：在本文章中您将找到根据城市关键词获取经纬度的方法，即就是通过google map API的逆经纬度查询接口获得经纬度。
google map api是一个强大的地图API，很多知名的网站都是用了google地图API，曾经我也写过一个根据来访者甚至域名来查询经纬度的程序（http://js8.in/mywork/ipsearch）。文章链接地址为：根据IP返回地理位置地址以及地理经纬度的方法，关于经纬度的其他文章可以参考全国各省市，县级城市经纬度SQL数据以及js数组
其中使用的是纯真IP数据库，已经google地图的逆经纬度查询~
而本例中我们实现的主要方式是php如何获得关键字的经纬度。
使用过Google map API的人都知道google有一个逆经纬度查询的接口，例如：

geocoder = new GClientGeocoder();geocoder.getLocations(
          '山东青岛',
        function($){
var lalton = $.Placemark[0].Point.coordinates;
alert(latlon[0]+","+latlon[1]);
});

可是对于php应该怎样获取经纬度呢？
今天在无意的时候看到一个wp的插件，其中找到了方法，就是通过google map API的逆经纬度查询接口获得经纬度~
首先你需要去http://code.google.com/intl/zh-CN/apis/maps/signup.html申请一个google map api的授权域名key，
google的map api逆经纬度接口为：
http://maps.google.com/maps/geo?q=关键词（如山东青岛）&key=刚刚申请的API KEY&sensor=false&output=xml&oe=utf8
请求下来的数据时kml的数据格式，怎样解析呢？
继续阅读全文……

根据IP返回地理位置地址以及地理经纬度的方法

三水清 2009-10-28 17:58:274 Comments

今天做了一个基于Google地图的根据IP返回地理位置的接口，效果演示地址：http://js8.in/mywork/ipsearch/

可以输入域名，如：js8.in，既可以返回地理位置，并且把地理位置定位到Google地图上，并且在地图上打开气泡显示经纬度。

效果图：
根据IP返回地理位置接口

关于这个IP查询接口的调用方法：http://js8.in/mywork/ipsearch/ipsearch.php?ip=你要查询的IP地址或者域名（如js8.in）

程序说明：

1、IP数据库采用了纯真IP数据库10.25日最新版，可能有时间就更新一下数据库内容。
2、获取的经纬度是根据Google的地图接口，返回的数据~对于国内的经纬度应该有一定的偏移（国家法律规定的），但是在Google上使用应该是可以的~

jQuery+google weather API轻松实现天气地图（二）

三水清 2009-10-19 10:15:31快抢沙发

原理：通过来输入的关键词查询出城市的经纬度，然后调用google的weather接口，查出城市的天气情况，根据xml解析出来的结果返货json格式，便于代码的传输~！

这里我使用的是MapBar的地图免费API，其他的如：Google 就不做说明了～方法类似～截图如下：

现在把Mysql.php的全部代码，使用了simpleXML对Google返回的数据进行解析：
PS：关于各个城市的经纬度数据，请阅览：全国各省市，县级城市经纬度SQL数据以及js数组

<?php
  include("conn.php");
$strsql="select * from latlon where name=’".$_GET['city']."’";
    $result=mysql_db_query($mysql_database, $strsql, $conn);
    // u83b7u53d6u67e5u8be2u7ed3u679c,1 = name 2= latlon 3=weidu 4 = jingdu
    $row=mysql_fetch_row($result);
    mysql_data_seek($result, 0);
    $row=mysql_fetch_row($result);
    if(empty($row[1])){
        $re =array(        "noCity"=>"no data",
        "yes"=>0,
    );
        echo "";
    }else{
    $nlatlon= $row[4].’,’.$row[3];
    $back=$row[3]*1000000
.$row[4]*1000000;
$url=’http://www.google.com/ig/api?weather=,,,’.$back;
$xml =  simplexml_load_file($url);
$re=array(
    "yes"=>1,
"today" =>(string)($xml->weather->forecast_conditions[0]->condition['data']),
"ssd"=>(string)($xml->weather->current_conditions->temp_c['data']),
"sd"=>(string)($xml->weather->current_conditions->humidity['data']),
"fx"=>(string)($xml->weather->current_conditions->wind_condition['data']),
"icon"=>’http://www.google.com’.($xml->weather->forecast_conditions[0]->icon['data']),
"week1" =>(string)($xml->weather->forecast_conditions[1]->day_of_week['data']),
"week1zuidi" =>(int)((int)((string)($xml->weather->forecast_conditions[1]->low['data'])-32)/1.8+1),
"week1zuigao" =>(int) ((int)((string)($xml->weather->forecast_conditions[1]->high['data'])-32)/1.8+1),
"week1tianqi" =>(string)($xml->weather->forecast_conditions[1]->condition['data']),
"week1icon" =>’http://www.google.com’.($xml->weather->forecast_conditions[1]->icon['data']),
"week2" =>(string)($xml->weather->forecast_conditions[2]->day_of_week['data']),
"week2zuidi" =>(int) ((int)((string)($xml->weather->forecast_conditions[2]->low['data'])-32)/1.8+1),
"week2zuigao" =>(int) ((int)((string)($xml->weather->forecast_conditions[2]->high['data'])-32)/1.8+1),
"week2tianqi" =>(string)($xml->weather->forecast_conditions[2]->condition['data']),
"week2icon" =>’http://www.google.com’.($xml->weather->forecast_conditions[2]->icon['data']),
"week3" =>(string)($xml->weather->forecast_conditions[3]->day_of_week['data']),
"week3zuidi" =>(int) ((int)((string)($xml->weather->forecast_conditions[3]->low['data'])-32)/1.8+1),
"week3zuigao" =>(int) ((int)((string)($xml->weather->forecast_conditions[3]->high['data'])-32)/1.8+1),
"week3tianqi" =>(string)($xml->weather->forecast_conditions[3]->condition['data']),
"week3icon" =>’http://www.google.com’.($xml->weather->forecast_conditions[3]->icon['data']),
"nlatlon" =>$nlatlon,
"googleurl"=>$url,
);
}
echo json_encode($re);
    mysql_free_result($result);
mysql_close($conn);
 
?>

♦▐返回顶部