第一種效果:可搜索,可以計算
?
?
參考:
?
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&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=en" type="text/javascript"></script> <script type="text/javascript"> function initialize() { //地圖初始化函數(shù) var map = new GMap2(document.getElementById("map_canvas"));//創(chuàng)建地圖 map.setCenter(new GLatLng(40.7142691,-74.0059729), 13); //區(qū)域 深度 var point = new GLatLng(40.7142691, -74.0059729); //坐標(biāo) map.addOverlay(new GMarker(point)); //增加標(biāo)點 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(); //創(chuàng)建右下縮略圖 map.addControl(smallMapControl, topRight); //增加控件 } function vok2(){ //獲取經(jīng)緯度函數(shù) var address=document.getElementById('t').value; if (address=="") return "請輸入要查詢的地址"; var map = new GMap2(document.getElementById("map_canvas"));//創(chuàng)建地圖 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(){//調(diào)用函數(shù) 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)//函數(shù)中間調(diào)用 { return d * Math.PI / 180.0; } function GetDistance( lat1, lng1, lat2, lng2)//獲取公里數(shù) { 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>
?
第二種,單個標(biāo)記
?
<!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&v=2&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提取地理數(shù)據(jù)
?
內(nèi)容提取仍然是一個熱門話題。不久之前Yahoo推出了一個新的Web服務(wù)-
Placemaker
,新推出的開放式 API,可以幫助開發(fā)者將他們的應(yīng)用程序和數(shù)據(jù)集地理位置感知化。
但是這個API只允許傳值,而且不允許有XML或RSS輸出。這也是我 為什么會創(chuàng)建
JS-Placemaker
的原因,這樣 javaScript便可以通過Placemaker服務(wù)。你需要做的就是為Placemaker獲取應(yīng)用程序的ID。
JS- Placemaker是專門為Yahoo Placemaker web服務(wù)準(zhǔn)備的一個JavaScript wrapper,使用
YQL
執(zhí)行表,讓您隨時提取地理位置的信息。
?
http://icant.co.uk/jsplacemaker/
?
?
第四種中國電子地圖
?
中國電子地圖服務(wù)商MapABC發(fā)布地圖 API V1.0 ,該版本具有如下特征:
1,對社區(qū)用戶完全免費。
任何人都能通過 網(wǎng)絡(luò)申請成為地圖API用戶。
2,對技術(shù)人員友好。
全面支持Javascript調(diào)用,豐富的用戶手冊和官方 BBS技術(shù)討論區(qū) 支持,提供全方位的技術(shù)支撐。 中小網(wǎng)站站長和技術(shù)愛好者都能很快掌握API的使用方法。
3,強大的位置數(shù)據(jù)庫支持。
4,對用戶友好,展現(xiàn)層采用Flash 技術(shù)。
使電子地圖更加流暢,動態(tài)效果更佳。
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&v=2&key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q" type="text/javascript"></script> <script src="http://www.google.com/uds/api?file=uds.js&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>?
?
第六種 數(shù)據(jù)庫型 可隨意添加!
?
?
參看: Creating an Interactive Travel Map using the Google Maps API
官網(wǎng):? http://code.google.com/apis/maps/articles/phpsqlajax_v3.html
?
?
第七種 自動定位
?
?
設(shè)計思路:根據(jù)游客的ip信息獲得地理信息,進而查詢地圖,再次顯示游客的當(dāng)前地址
?
?
第一步獲得游客的ip信息
?
由于公告只能加html代碼,肯定不可以使用服務(wù)端程序來獲取到游客的ip,那就只能通過js方式獲得游客的ip,第一個想法就是使用
?
騰訊的ip開放接口:可以獲得一個數(shù)組信息
?
?
?
<script language="javascript" type="text/javascript" src="http://fw.qq.com/ipaddress"></script> <script>document.write("你的IP是:"+IPData[0]+",來自:"+IPData[2]);</script>?
?
?
但是這個數(shù)組是gbk編碼的,而如果想要用utf8格式,需要轉(zhuǎn)碼,不過也可以使用新浪的一個ip接口,這個接口返回的是json格式的數(shù)據(jù)
?
?
?
<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>?
?
這個接口的數(shù)據(jù)是utf8格式,正合適,下面就是用這個接口獲得ip信息,備注:ip本來就是一個粗略的估算,再說影響獲得你ip的接口因素有很多,最終ip信息的準(zhǔn)確還要看新浪的ip接口,個人感覺騰訊的ip接口比較精確可用到縣一級,新浪的ip接口只能到市一級!騰訊ip需要轉(zhuǎn)utf8格式,你可以試試看
?
?
第二根據(jù)谷歌地圖查詢游客位置
?
?
<script language="javascript" type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script> <!--調(diào)用谷歌地圖js,zoom縮放倍數(shù),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還可以被手機設(shè)備所支持,如下:
? Android 2.0+
? iPhone 3.0+
? Opera Mobile 10.1+
? Symbian (S60 3rd & 5th generation)
? Blackberry OS 6
? Maemo
?
國內(nèi),對于桌面瀏覽器,不支持地理位置API的低版本IE依舊占據(jù)半壁江山,所以,在桌面瀏覽器上應(yīng)用此API還需些日子。不過對于像是手機,ipad這類移動設(shè)備,我覺得是可以好好用用這個不錯的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) { //經(jīng)緯度 var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); //地圖參數(shù) 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: "用戶位置" }); //提示內(nèi)容 var contentString = "<b>時間戳:</b> " + parseTimestamp(position.timestamp) + "<br/><b>用戶位置:</b> 緯度 " + position.coords.latitude + ", 經(jīng)度 " + 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>?
當(dāng)用戶的位置被返回的時候,會藏在一個位置對象中,該對象包括一些屬性,具體見下表:屬性 釋義
coords.latitude 緯度數(shù)值
coords.longitude 經(jīng)度數(shù)值
coords.altitude 參考橢球之上的高度
coords.accuracy 精確度
coords.altitudeAccuracy 高度的精確度
coords.heading 設(shè)備正北順時針前進的方位
coords.speed 設(shè)備外部環(huán)境的移動速度(m/s)
timestamp 當(dāng)位置捕獲到時的時間戳
?
?
?
?
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
