【google】用谷歌浏览器来当手机模拟器

很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容。

谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器。在Windows的【开始】–>【运行】中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页:

谷歌Android:

chrome.exe –user-agent=”Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1″
苹果iPhone:

chrome.exe –user-agent=”Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10″
诺基亚N97:

chrome.exe –user-agent=”Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.1.18124″
试一试,分别用Android、iPhone、诺基亚访问http://www.163.com/、http://blog.s135.com/、http://www.google.com.hk/、http://3g.qq.com、http://t.sina.cn这些3G手机网页,看看有什么不同。

更多款手机的User-Agent:http://www.zytrax.com/tech/web/mobile_ids.html

10月11日备注:如果想切换回普通浏览器模式,关掉所有Chrome浏览器,重开即可。如果不想关闭浏览器,切回普通浏览器模式,则访问:

chrome.exe –user-agent=”Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.63 Safari/534.3″

【Google】google地图-根据位置来查找经纬度

效果:

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>Get xy via ip</title>  

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="./js/geoip.js"></script>  

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  

<script type="text/javascript">
  var geocoder;
  var map;
  var marker;
  var latlng;  

  function initialize(Title,openInfo) {
    var lat =  geoip_latitude();
    var lon = geoip_longitude();
    latlng = new google.maps.LatLng(lat, lon);
    var myOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl:false,
      streetViewControl: false,
      navigationControlOptions:{position:google.maps.ControlPosition.LEFT,style: google.maps.NavigationControlStyle.DEFAULT}
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);   

    marker = new google.maps.Marker ({
		position: map.getCenter(),
		map: map,
		Draggable:true,
		title: Title
     });  

    var infowindow = new google.maps.InfoWindow({
		 content: openInfo,
         position: myLatlng
		 });  

	infowindow.open(map); 

	google.maps.event.addListener (map, 'idle', function () {
	marker.setPosition(map.center);
	document.getElementById("latitude").value = marker.getPosition().lat();
	document.getElementById("longitude").value = marker.getPosition().lng();  

	});  

     google.maps.event.addListener (marker, 'dragend', function (){
		  map.panTo (marker.getPosition());
		  document.getElementById("latitude").value = marker.getPosition().lat();
		  document.getElementById("longitude").value = marker.getPosition().lng();
	});
}  

 function codeAddress(address) {  

	geocoder = new google.maps.Geocoder();  

	geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        marker.setPosition(map.center);
		document.getElementById("latitude").value = marker.getPosition().lat();
		document.getElementById("longitude").value = marker.getPosition().lng();
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
  function GetAddress() {
	var address = document.getElementById("address").value;
	codeAddress(address);
  }  

</script>  

</head>  

<body onload="initialize()">  

<div style="margin: 0 auto;width:930px;height:auto;">

<div id="map_canvas" style="width:930px; height:400px"></div>  

<div height="100px"></div>

<div>
    <input id="address" type="textbox" value="请输入地址...">
    <input type="button" value="查找" onclick='GetAddress()'>
</div>  

<div id="top" style="width:280px; height:200px">
	<table>
		<tr><td style="width:100px;">经度:</td><td><input id="longitude" type="text"  value="" /></td></tr>
		<tr><td style="width:100px;">纬度:</td><td><input id="latitude" type="text"  value="" /></td></tr>
	</table>
</div>  

</div>
</body>
</html>

geoip.js代码:

function geoip_country_code() { return 'CA'; }
function geoip_country_name() { return 'Canada'; }
function geoip_city()         { return 'Montreal'; }
function geoip_region()       { return 'QC'; }
function geoip_region_name()  { return 'Quebec'; }
function geoip_latitude()     { return '45.5000'; }
function geoip_longitude()    { return '-73.5833'; }
function geoip_postal_code()  { return ''; }
function geoip_area_code()    { return ''; }
function geoip_metro_code()   { return ''; }

 

【Google】google地图-根据经纬度来查找位置

效果图:

HTML代码:

<link rel="stylesheet" href="source/plugin/driving_ranges/template/css/driving_page.css" type="text/css" />

<script type="text/javascript" src="source/plugin/driving_ranges/template/js/jquery-1.7.2.min.js" ></script>

<script type="text/javascript" src="source/plugin/driving_ranges/template/js/driving_page.js" ></script>

<script type="text/javascript" src="source/plugin/driving_ranges/template/js/google.js" ></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  

<div id="Map">

<div id="map_canvas_jhonse" style="width: 910px; height: 600px;"></div> 

</div>

Javascript代码:

$(document).ready(function(){

    /* 
        latitude 纬度  
        longitude 精度  
        title 悬浮在标记图标上显示的内容 
        openInfo 提示窗口内容(InfoWindow) 
    */  
    function initialize(latitude,longitude,title,openInfo) {  

		var map;
        //地图定位  
        var myLatlng = new google.maps.LatLng(latitude,longitude);  
        var myOptions = {  
                zoom : 11,          //地图的缩放程度  
                center : myLatlng,  //地图中心位置  
                mapTypeId : google.maps.MapTypeId.ROADMAP  
            };  

        //把地图绑定在ID为map_canvas的DIV上  
        map = new google.maps.Map(document.getElementById("map_canvas_jhonse"),myOptions);  

        //显示地址的标记图标  
        var marker = new google.maps.Marker({  
            position: myLatlng,   
            map: map,   
            title:title  
          //  icon: 'http://google-maps-icons.googlecode.com/files/factory.png'   //自定义标记图标  
        });  

        var infowindow = new google.maps.InfoWindow({           //InfoWindow 内容提示  
            content: openInfo,  
            position: myLatlng  
        });   

        infowindow.open(map);   //显示提示主窗口  

        //给marker添加点击事件  
        google.maps.event.addListener(marker, 'click', function() {  
            infowindow.open(map); //如果提示窗口关闭了,点击标记图标可再次显示提示主窗口  
        });   
    } 

	initialize($("#wd").text(),$("#jd").text(),$("#Course").text(),$("#Con").html());

});