99精品视频免费,97在线视频99播放,91最新网站

第一種效果：可搜索，可以計算

參考：

http://www.ditu123.com/main/google_map_api.html#The_Hello_World_of_Google_Maps

代碼：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google 地圖 JavaScript API 示例: 控件定位</title>
<script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=en" type="text/javascript"></script>

<script type="text/javascript">
	function initialize() { //地圖初始化函數
		var map = new GMap2(document.getElementById("map_canvas"));//創建地圖
		map.setCenter(new GLatLng(40.7142691,-74.0059729), 13);     //區域 深度

		var point = new GLatLng(40.7142691, -74.0059729);            //坐標
		map.addOverlay(new GMarker(point));                      //增加標點
		map.openInfoWindow(map.getCenter(),document.createTextNode("Hello, world")); //增加提示框

		var topRight = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10));//取得右上10*10的中心點
		var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));//取得右下10*10的中心點

		map.addControl(new GSmallMapControl(), topRight);       //增加控件 左上角放大縮小工具
	   
		///var smallMapControl = new GOverviewMapControl();        //創建右下縮略圖
		map.addControl(smallMapControl, topRight);              //增加控件     
	   
	}
  
	function vok2(){ //獲取經緯度函數
		var address=document.getElementById('t').value;
		if (address=="") return "請輸入要查詢的地址";
		var map = new GMap2(document.getElementById("map_canvas"));//創建地圖
		var geocoder = new GClientGeocoder();
		   geocoder.getLatLng(
			address,
			function(point) {
			  if (!point) {
				alert(address + " 無地址！");
			  } else {
				map.setCenter(point, 14);
				var marker = new GMarker(point);
				document.getElementById('v').innerHTML=point;
				map.addOverlay(marker);
				marker.openInfoWindowHtml(address);
			  }
			}
		);
	}

	function calDis(){//調用函數
		var lat1 = document.getElementById( "X1").value * 1;
		var lng1 = document.getElementById( "Y1").value * 1;
		var lat2 = document.getElementById( "X2").value * 1;
		var lng2 = document.getElementById( "Y2").value * 1;
		var dis = GetDistance(lat1, lng1, lat2, lng2);
		document.getElementById("ss").innerHTML ="2點距離是: "+ dis+" km";
	}

	function rad(d)//函數中間調用
	{
		return d * Math.PI / 180.0;
	}

	function GetDistance( lat1, lng1, lat2, lng2)//獲取公里數
	{
		if( ( Math.abs( lat1 ) > 90 ) ||( Math.abs( lat2 ) > 90 ) ){
			return false;
		}
		if( ( Math.abs( lng1 ) > 180 ) ||( Math.abs( lng2 ) > 180 ) ){
			return false;
		}
		var radLat1 = rad(lat1);
		var radLat2 = rad(lat2);
		var a = radLat1 - radLat2;
		var b = rad(lng1) - rad(lng2);
		var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
		Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
		s = s *6378.137 ;// EARTH_RADIUS;
		s = Math.round(s * 10000) / 10000;
		return s;
	}
</script>


</head>
<body onload="initialize()" onunload="GUnload()">
	<div id="map_canvas" style="width: 500px; height: 300px"></div>
	<div> 
		<input name="t" type="text" id="t"/>
		<span onclick="vok2();" style="cursor:pointer">[查詢]</span>
		<span id="v"></span>
    </div>
	<br /><br />
    <div >
		A:<input type="text" id="X1"/>-<input type="text" id="Y1"/><br />
		B:<input type="text" id="X2"/>-<input type="text" id="Y2"/>
		<span onclick="calDis();" style="cursor:pointer">[計算]</span>
		<span id="ss"></span>
    </div>
   
</body>
</html>

第二種，單個標記

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Google Maps API</title>
<!-- Your own Google API key must be used this one will only work
     for this server and directory -->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA69393o7mAW_7Z8yPE9mj1hT87Zy2LdSAMVK_IWP23IfaHiwArBSqoC1tfQ_nGVfHT7ZJ_ycmO7DjCQ" type="text/javascript"></script>
<script type="text/javascript">
var address="14 Wall Street New York, NY 10010";
var zoom=15;
window.onload = function initialize1() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("googlemap"));
        map.setCenter(new GLatLng(37.4419, -122.1419), zoom);
        map.addControl(new GSmallMapControl());

        geocoder = new GClientGeocoder();
        if (geocoder) {
        geocoder.getLatLng(
            address,
            function(point) {
                if (!point) {
                    alert(address + " not found");
                } else {
                    map.setCenter(point, zoom);
                    var marker = new GMarker(point);
                    map.addOverlay(marker);
                    GEvent.addListener(marker, "mouseover", function() {
                        marker.openInfoWindowHtml("<div style='padding:0; margin:0 ; font-size:12px; height:10px; width:140px;'>" + address + "</div>");
                    }
                );
    
                GEvent.addListener(marker, "mouseout", function() {
                        marker.closeInfoWindow();
                    }
                );
            }
            }
        );
    }
    }
}

</script>
</head>
<body>
<div id="googlemap" style="width:500px; height:300px;"></div>
</body>
</html>

使用方法：

首先你要保證注冊一個google map 免費的 key
http://code.google.com/intl/zh-CN/apis/maps/signup.html （中文）
http://code.google.com/intl/en/apis/maps/signup.html??? （英文）

之后你可以把上面的代碼封裝，那個address就是接口了，輸入有效地址就可以顯示位置。

第三種JSPlacemaker - 使用純JavaScript提取地理數據

內容提取仍然是一個熱門話題。不久之前Yahoo推出了一個新的Web服務- Placemaker ，新推出的開放式 API，可以幫助開發者將他們的應用程序和數據集地理位置感知化。

但是這個API只允許傳值，而且不允許有XML或RSS輸出。這也是我為什么會創建 JS-Placemaker 的原因，這樣 javaScript便可以通過Placemaker服務。你需要做的就是為Placemaker獲取應用程序的ID。

JS- Placemaker是專門為Yahoo Placemaker web服務準備的一個JavaScript wrapper，使用 YQL 執行表，讓您隨時提取地理位置的信息。

http://icant.co.uk/jsplacemaker/

第四種中國電子地圖

中國電子地圖服務商MapABC發布地圖 API V1.0 ，該版本具有如下特征：

1，對社區用戶完全免費。

任何人都能通過網絡申請成為地圖API用戶。

2，對技術人員友好。

全面支持Javascript調用，豐富的用戶手冊和官方 BBS技術討論區支持，提供全方位的技術支撐。中小網站站長和技術愛好者都能很快掌握API的使用方法。

3，強大的位置數據庫支持。

4，對用戶友好，展現層采用Flash 技術。

使電子地圖更加流暢，動態效果更佳。

5，API除了提供地圖操作外，還提供在線查詢功能。

支持地理位置搜索、北京等大城市的實時交通查詢。

6，支持地址匹配。

第五種 http://www.iteye.com/news/13813-web-geo

附錄：

Google api http://code.google.com/apis/ajax/playground/

    <!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Sample</title>
    <style type="text/css">
      @import url("http://www.google.com/uds/css/gsearch.css");
      @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
    </style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"
      type="text/javascript"></script>
    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>

    <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
      
        // Create and Center a Map
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
    
        // bind a search control to the map, suppress result list
        map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
      }
    }
    GSearch.setOnLoadCallback(initialize);

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

第六種數據庫型可隨意添加！

參看： Creating an Interactive Travel Map using the Google Maps API

官網：? http://code.google.com/apis/maps/articles/phpsqlajax_v3.html

第七種自動定位

設計思路：根據游客的ip信息獲得地理信息，進而查詢地圖，再次顯示游客的當前地址

第一步獲得游客的ip信息

由于公告只能加html代碼，肯定不可以使用服務端程序來獲取到游客的ip，那就只能通過js方式獲得游客的ip，第一個想法就是使用

騰訊的ip開放接口：可以獲得一個數組信息

    <script language="javascript" type="text/javascript" src="http://fw.qq.com/ipaddress"></script> 
<script>document.write("你的IP是："+IPData[0]+"，來自："+IPData[2]);</script>

　但是這個數組是gbk編碼的，而如果想要用utf8格式，需要轉碼，不過也可以使用新浪的一個ip接口，這個接口返回的是json格式的數據

    <script language="javascript" type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script> 
<script type="text/javascript">document.write("歡迎來自："+remote_ip_info.country+remote_ip_info.province+remote_ip_info.city+"的朋友！"); </script>

這個接口的數據是utf8格式，正合適，下面就是用這個接口獲得ip信息,備注：ip本來就是一個粗略的估算，再說影響獲得你ip的接口因素有很多，最終ip信息的準確還要看新浪的ip接口，個人感覺騰訊的ip接口比較精確可用到縣一級，新浪的ip接口只能到市一級！騰訊ip需要轉utf8格式，你可以試試看

第二根據谷歌地圖查詢游客位置

    <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: 500px; height: 400px;"></div>

或者使用google 的 ?Geolocation

二、瀏覽器的支持情況

目前W3C地理位置API被以下桌面瀏覽器支持：

? Firefox 3.5+

? Chrome 5.0+

? Safari 5.0+

? Opera 10.60+

? Internet Explorer 9.0+ （不支持6-8）

W3C地理位置API還可以被手機設備所支持，如下：

? Android 2.0+

? iPhone 3.0+

? Opera Mobile 10.1+

? Symbian (S60 3rd & 5th generation)

? Blackberry OS 6

? Maemo

國內，對于桌面瀏覽器，不支持地理位置API的低版本IE依舊占據半壁江山，所以，在桌面瀏覽器上應用此API還需些日子。不過對于像是手機，ipad這類移動設備，我覺得是可以好好用用這個不錯的API的，可以做出很多實用的功能的。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀏覽器地理位置信息api測試</title>
</head>

<body>
<div id="gmap" style="width:500px;height:400px;"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var eleGmap = document.getElementById("gmap");
var showMap = function(position) {
	//經緯度
    var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
	//地圖參數
	var options = {
		zoom: 10,
		center: pos,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	//地圖
	var map = new google.maps.Map(eleGmap, options);
	//地圖浮動提示
	var marker = new google.maps.Marker({
		position: pos,
		map: map,
		title: "用戶位置"
	});
	//提示內容
	var contentString = "<b>時間戳:</b> " + parseTimestamp(position.timestamp) + "<br/><b>用戶位置:</b> 緯度 " + position.coords.latitude + ", 經度 " + position.coords.longitude + ", 精確度 " + position.coords.accuracy;
	var infowindow = new google.maps.InfoWindow({
		content: contentString
	});
	//提示事件綁定
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});
};

//時間戳獲取與處理
var parseTimestamp = function(timestamp) {
	var d = new Date(timestamp);
	var day = d.getDate();
	var month = d.getMonth() + 1;
	var year = d.getFullYear();
	var hour = d.getHours();
	var mins = d.getMinutes();
	var secs = d.getSeconds();
	var msec = d.getMilliseconds();
	return year + "年" + month +"月"+ day +"日 "+ hour + ":" + mins + ":" + secs + ", " + msec;
};

if (navigator.geolocation) {
	eleGmap.innerHTML = '<div id="help" style="width:500px;height:400px;"><img src="http://www.zhangxinxu.com/study/image/loading.gif" /></div>';
    //一次性獲取位置的請求
    navigator.geolocation.getCurrentPosition(showMap);
} 
else eleGmap.innerHTML = '<div id="help" style="width:500px;height:400px;">您的瀏覽器不支持地理位置 O(∩_∩)O~</div>';
</script>
</body>
</html>

當用戶的位置被返回的時候，會藏在一個位置對象中，該對象包括一些屬性，具體見下表：屬性釋義

coords.latitude 緯度數值

coords.longitude 經度數值

coords.altitude 參考橢球之上的高度

coords.accuracy 精確度

coords.altitudeAccuracy 高度的精確度

coords.heading 設備正北順時針前進的方位

coords.speed 設備外部環境的移動速度(m/s)

timestamp 當位置捕獲到時的時間戳

Google 地圖 google map api / 地圖有關

更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義