今天在博客园看到PHP淮北的一篇文章打造属于自己的谷歌地图版博客公告【演示+源码】，觉得很是不错，马上将源代码拷贝到自己的博客中试了试，感觉很不错，唯一美中不足的是，就是定位不太准确，只能定位到市一级，刚好前两天看到HTML5支持浏览器的定位，所以决定改造下代码首先使用HTML5的定位函数确定地图的显示位置，如果不支持再使用原来的定位到市一级的精度的地址。
首先贴上HTML5的浏览器定位代码
HTML5 定位代码
这段代码首先判断是否支持浏览器定位，如果不支持则判断是否支持google.gears，都不支持的话或者出现其他错误的话，调用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=" 230px; height: 280px;"></div>
只要将代码拷贝到公告板上即可，如果不知道公告板在哪里，请到博客园后台的设置，然后将页面往下拖，即可发现公告板。
代码在IE9，Firfox6，Chrome上测试通过，如果支持浏览器定位，将会弹出一个提示，要求你确定使用浏览器定位。
具体效果可以参看本文左上角示例，enjoy！