打造属于自己的谷歌地图版博客公告加强版

今天在博客园看到PHP淮北的一篇文章打造属于自己的谷歌地图版博客公告【演示+源码】，觉得很是不错，马上将源代码拷贝到自己的博客中试了试，感觉很不错，唯一美中不足的是，就是定位不太准确，只能定位到市一级，刚好前两天看到HTML5支持浏览器的定位，所以决定改造下代码首先使用HTML5的定位函数确定地图的显示位置，如果不支持再使用原来的定位到市一级的精度的地址。

 

首先贴上HTML5的浏览器定位代码

 

HTML5 定位代码

这段代码首先判断是否支持浏览器定位，如果不支持则判断是否支持google.gears，都不支持的话或者出现其他错误的话，调用handleNoGeolocation函数退而求次进行市一级的定位

 

handleNoGeolocation函数

下面是完整代码

 

<script language="javascript" type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script>

<!--调用谷歌地图js，zoom缩放倍数，center中心，mapTypeId地图类型-->    
<script type="text/javascript" src="http://ditu.google.com/maps/api/js?sensor=true"></script>    
<script language="javascript">    
 var geocoder;    
  var map;   

geocoder = new google.maps.Geocoder();  
 var address = remote_ip_info.country+remote_ip_info.province+remote_ip_info.city; 
 
  function initialize() {    
      
    var latlng = new google.maps.LatLng(39.9493, 116.3975);    
   var myOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };    
   
    document.getElementById('add').innerHTML = "欢迎来自："+address+"的朋友！"; 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var initialLocation;
var browserSupportFlag =  new Boolean();

if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  // Try Google Gears Geolocation
  } else if (google.gears) {
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeoLocation(browserSupportFlag);
    });
  // Browser doesn't support Geolocation
  } else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }
   
    
  }   
     
  function handleNoGeolocation(errorFlag) {
 if (geocoder) {    
      geocoder.geocode( { 'address': address}, function(results, status) {    
        if (status == google.maps.GeocoderStatus.OK) {   
          map.setCenter(results[0].geometry.location);    
          var marker = new google.maps.Marker({    
              map: map,     
              position: results[0].geometry.location,    
               title:'位置'
        
          });   
         
        }     
      });    
    } 
 
  }
    
  </script>    

<body onload="initialize()">  
 
 <div id="add" style="text-align: center;"></div>
 <div id="map_canvas" style="width: 230px; height: 280px;"></div>

 


只要将代码拷贝到公告板上即可，如果不知道公告板在哪里，请到博客园后台的设置，然后将页面往下拖，即可发现公告板。

 

代码在IE9，Firfox6，Chrome上测试通过，如果支持浏览器定位，将会弹出一个提示，要求你确定使用浏览器定位。

 

具体效果可以参看本文左上角示例，enjoy！

posted @ 2011-09-09 13:56  风雷云雪电  Views(1926)  Comments(14)  Edit  收藏  举报