【探索HTML5第二弹03】走近地图应用的世界，看我们google地图可以看些什么！
生活随笔
收集整理的這篇文章主要介紹了
【探索HTML5第二弹03】走近地图应用的世界，看我们google地图可以看些什么！
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前言
昨天，前天都有一些事情了，自己的學(xué)習(xí)任務(wù)有所耽擱，但這不是主要原因，主要原因是昨天和前天都在搞canvas相關(guān)東西，這個(gè)東東怎么說(shuō)呢？我是越搞越不能確定自己是否會(huì)用到，所以過(guò)程中有點(diǎn)糾結(jié)，然后慢慢時(shí)間就過(guò)去了。另外，我本來(lái)想重新學(xué)習(xí)HTML5的，但是發(fā)現(xiàn)在走之前的老路，重復(fù)的過(guò)程就沒(méi)必要了，我要從新思考一下最近的學(xué)習(xí)計(jì)劃。
最近開(kāi)始接觸了google地圖應(yīng)用，那確實(shí)叫一個(gè)不錯(cuò)啊！！！可以完成很多事情了，這里用到的是GMaps.js，這里將其簡(jiǎn)單說(shuō)下吧！
進(jìn)入Gmaps的世界
簡(jiǎn)單應(yīng)用
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>獲取當(dāng)前位置</title> 5 <style type="text/css"> 6 #map { width: 1000px; height: 600px; } 7 8 </style> 9 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 11 <script src="js/gmaps.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 $(document).ready(function () { 14 /* 15 el 裝載地圖容器id 16 lat 緯度 17 lng 經(jīng)度 18 */ 19 var map = new GMaps({ 20 el: '#map', 21 lat: 30.657358499999994, 22 lng: 104.049977 23 }); 24 }); 25 </script> 26 </head> 27 <body> 28 <div id="map"> 29 </div> 30 31 </body> 32 </html>這就是最簡(jiǎn)單的應(yīng)用了，代碼上有一定說(shuō)明，而且官方的api也很詳細(xì)。
動(dòng)態(tài)獲取當(dāng)前位置
這里我們與HTML5的Geolocation結(jié)合使用，告訴用戶(hù)當(dāng)前在哪里，是個(gè)不錯(cuò)的選擇，借此就可以告訴其周?chē)木频晔裁粗?lèi)的了。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>獲取當(dāng)前位置</title><style type="text/css">#map { width: 1000px; height: 600px; }</style><script src="js/jquery-1.7.1.js" type="text/javascript"></script><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script src="js/gmaps.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {/*el 裝載地圖容器idlat 緯度lng 經(jīng)度該應(yīng)用基于html5，并要求用戶(hù)共享自身位置*/navigator.geolocation.getCurrentPosition(function (position) {var map = new GMaps({el: '#map',lat: position.coords.latitude,lng: position.coords.longitude});});});</script> </head> <body><div id="map"></div></body> </html>參數(shù)說(shuō)明
這里我們對(duì)代碼中的一些參數(shù)說(shuō)明，具體見(jiàn)google map api
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>獲取當(dāng)前位置</title><style type="text/css">#map { width: 1000px; height: 600px; }</style><script src="js/jquery-1.7.1.js" type="text/javascript"></script><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script src="js/gmaps.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {/*el 裝載地圖容器idlat 緯度lng 經(jīng)度zoomControl 是否顯示縮放控制zoomControlOpt 縮放控制樣式定義panControl 是否顯示移動(dòng)容器streetViewControl 是否顯示右上角的人，用途不明mapTypeControl 是否顯示衛(wèi)星控制overviewMapControl 右下角預(yù)覽地圖*/var map = new GMaps({el: '#map',lat: 30.657358499999994,lng: 104.049977,zoomControl: true,zoomControlOpt: {style: 'BIG',position: 'TOP_RIGHT'},panControl: true,streetViewControl: true,mapTypeControl: true,overviewMapControl: true, });});</script> </head> <body><div id="map"></div></body> </html>事件回調(diào)
當(dāng)鼠標(biāo)在地圖上也會(huì)有一定事件的喲，不信試試！
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><style type="text/css">#map { width: 1000px; height: 600px; }</style><script src="js/jquery-1.7.1.js" type="text/javascript"></script><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script src="js/gmaps.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {/*el 裝載地圖容器idlat 緯度lng 經(jīng)度zoomControl 是否顯示縮放控制zoomControlOpt 縮放控制樣式定義panControl 是否顯示移動(dòng)容器streetViewControl 是否顯示右上角的人，用途不明mapTypeControl 是否顯示衛(wèi)星控制overviewMapControl 右下角預(yù)覽地圖*//*支持以下事件bounds_changed None This event is fired when the viewport bounds have changed.center_changed None This event is fired when the map center property changes.click MouseEvent This event is fired when the user clicks on the map (but not when they click on a marker or infowindow).dblclick MouseEvent This event is fired when the user double-clicks on the map. Note that the click event will also fire, right before this one.drag None This event is repeatedly fired while the user drags the map.dragend None This event is fired when the user stops dragging the map.dragstart None This event is fired when the user starts dragging the map.heading_changed None This event is fired when the map heading property changes.idle None This event is fired when the map becomes idle after panning or zooming.maptypeid_changed None This event is fired when the mapTypeId property changes.mousemove MouseEvent This event is fired whenever the user's mouse moves over the map container.mouseout MouseEvent This event is fired when the user's mouse exits the map container.mouseover MouseEvent This event is fired when the user's mouse enters the map container.projection_changed None This event is fired when the projection has changed.resize None Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .rightclick MouseEvent This event is fired when the DOM contextmenu event is fired on the map container.tilesloaded None This event is fired when the visible tiles have finished loading.tilt_changed None This event is fired when the map tilt property changes.zoom_changed None This event is fired when the map zoom property changes.其中e中包含了地圖相關(guān)信息*/var map = new GMaps({el: '#map',lat: 30.657358499999994,lng: 104.049977,zoomControl: true,zoomControlOpt: {style: 'BIG',position: 'TOP_RIGHT'},panControl: true,streetViewControl: true,mapTypeControl: true,overviewMapControl: true,mouseout: function (e) {var s = '';}});});</script> </head> <body><div id="map"></div></body> </html>為自己所在位置打上標(biāo)記
打標(biāo)記 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #map { width: 600px; height: 400px; } 7 8 </style> 9 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 11 <script src="js/gmaps.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 $(document).ready(function () { 14 /* 15 el 裝載地圖容器id 16 lat 緯度 17 lng 經(jīng)度 18 zoomControl 是否顯示縮放控制 19 zoomControlOpt 縮放控制樣式定義 20 panControl 是否顯示移動(dòng)容器 21 streetViewControl 是否顯示右上角的人，用途不明 22 mapTypeControl 是否顯示衛(wèi)星控制 23 overviewMapControl 右下角預(yù)覽地圖 24 */ 25 26 /* 27 支持以下事件 28 bounds_changed None This event is fired when the viewport bounds have changed. 29 center_changed None This event is fired when the map center property changes. 30 click MouseEvent This event is fired when the user clicks on the map (but not when they click on a marker or infowindow). 31 dblclick MouseEvent This event is fired when the user double-clicks on the map. Note that the click event will also fire, right before this one. 32 drag None This event is repeatedly fired while the user drags the map. 33 dragend None This event is fired when the user stops dragging the map. 34 dragstart None This event is fired when the user starts dragging the map. 35 heading_changed None This event is fired when the map heading property changes. 36 idle None This event is fired when the map becomes idle after panning or zooming. 37 maptypeid_changed None This event is fired when the mapTypeId property changes. 38 mousemove MouseEvent This event is fired whenever the user's mouse moves over the map container. 39 mouseout MouseEvent This event is fired when the user's mouse exits the map container. 40 mouseover MouseEvent This event is fired when the user's mouse enters the map container. 41 projection_changed None This event is fired when the projection has changed. 42 resize None Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') . 43 rightclick MouseEvent This event is fired when the DOM contextmenu event is fired on the map container. 44 tilesloaded None This event is fired when the visible tiles have finished loading. 45 tilt_changed None This event is fired when the map tilt property changes. 46 zoom_changed None This event is fired when the map zoom property changes. 47 48 其中e中包含了地圖相關(guān)信息 49 50 */ 51 var map = new GMaps({ 52 el: '#map', 53 lat: 30.657358499999994, 54 lng: 104.049977, 55 zoomControl: true, 56 zoomControlOpt: { 57 style: 'BIG', 58 position: 'TOP_RIGHT' 59 }, 60 panControl: true, 61 streetViewControl: true, 62 mapTypeControl: true, 63 overviewMapControl: true, 64 mouseout: function (e) { 65 var s = ''; 66 } 67 }); 68 69 /* 70 建立標(biāo)記需要調(diào)用addMarker方法 71 需要提供緯度經(jīng)度，多余的信息可放置于details對(duì)象字面量里面，在事件調(diào)用時(shí)會(huì)用到 72 title為鼠標(biāo)以上時(shí)提示 73 支持事件調(diào)用 74 infoWindow 中可使用html標(biāo)簽點(diǎn)擊后可以看到內(nèi)容（若是有點(diǎn)擊事件，會(huì)先調(diào)用） 75 infoWindow 具有以下事件closeclick, content_changed, domready, position_changed and zindex_changed 76 77 addMarkers 可一次調(diào)用多個(gè) 78 */ 79 map.addMarker({ 80 lat: 30.657358499999994, 81 lng: 104.049977, 82 title: '公司位置', 83 details: { 84 database_id: 42, 85 author: 'HPNeo' 86 87 }, 88 click: function (e) { 89 alert('click:' + e); 90 91 } 92 93 }) 94 95 map.addMarker({ 96 lat: 30.657358499999994, 97 lng: 104.059977, 98 title: '另一標(biāo)記', 99 infoWindow: { 100 content: '<p>ddddddddd</p>', 101 closeclick: function (e) { 102 alert('關(guān)閉'); 103 } 104 }, 105 click: function (e) { 106 alert('click:' + e); 107 108 } 109 110 111 }); 112 113 114 }); 115 </script> 116 </head> 117 <body> 118 <div id="map"> 119 </div> 120 121 </body> 122 </html> 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #map { width: 600px; height: 400px; } 7 8 </style> 9 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 11 <script src="js/gmaps.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 $(document).ready(function () { 14 var map = new GMaps({ 15 el: '#map', 16 lat: 30.657358499999994, 17 lng: 104.049977 18 19 }); 20 //支持html5 21 GMaps.geolocate({ 22 success: function (position) { 23 var lat = position.coords.latitude, lon = position.coords.longitude; 24 map.setCenter(lat, lon); 25 map.addMarker({ 26 lat: 30.657358499999994, 27 lng: 104.049977, 28 title: '您的位置', 29 infoWindow: { 30 content: '您在這里' 31 } 32 }); 33 }, 34 error: function (error) { 35 alert('Geolocation failed: ' + error.message); 36 }, 37 not_supported: function () { 38 alert("Your browser does not support geolocation"); 39 }, 40 always: function () { 41 } 42 }); 43 }); 44 </script> 45 </head> 46 <body> 47 <div id="map"> 48 </div> 49 50 </body> 51 </html>位置檢索
我們當(dāng)然可使用搜索技術(shù)了，google map api 果然強(qiáng)大！！！
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #map { width: 600px; height: 400px; } 7 8 </style> 9 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 11 <script src="js/gmaps.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 $(document).ready(function () { 14 15 var map = new GMaps({ 16 el: '#map', 17 lat: 30.657358499999994, 18 lng: 104.049977 19 }); 20 21 //支持html5 22 GMaps.geolocate({ 23 success: function (position) { 24 var lat = position.coords.latitude, lon = position.coords.longitude; 25 map.setCenter(lat, lon); 26 map.addMarker({ 27 lat: 30.657358499999994, 28 lng: 104.049977, 29 title: '您的位置', 30 infoWindow: { 31 content: '您在這里' 32 } 33 }); 34 }, 35 error: function (error) { 36 alert('Geolocation failed: ' + error.message); 37 }, 38 not_supported: function () { 39 alert("Your browser does not support geolocation"); 40 }, 41 always: function () { 42 } 43 }); 44 45 $('#address').change(function (e) { 46 var el = $(this); 47 GMaps.geocode({ 48 address: el.val(), 49 callback: function (r, s) { 50 if (s == 'OK') { 51 var latlng = r[0].geometry.location; 52 map.setCenter(latlng.lat(), latlng.lng()); 53 map.addMarker({ 54 lat: latlng.lat(), 55 lng: latlng.lng(), 56 title: el.val() 57 }); 58 } 59 } 60 }); 61 }); 62 63 64 }); 65 </script> 66 </head> 67 <body> 68 <input type="text" value="請(qǐng)輸入地址" id="address" /> 69 <div id="map"> 70 </div> 71 72 </body> 73 </html>在地圖上畫(huà)圈圈！
這個(gè)功能真是貼心！公安局或者其他系統(tǒng)，在不同地點(diǎn)會(huì)有地區(qū)作案數(shù)預(yù)警信息，更具此功能可以將作案頻繁的區(qū)域圈起來(lái)，重點(diǎn)提示！
畫(huà)區(qū)域 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #map { width: 600px; height: 400px; } 7 8 </style> 9 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 11 <script src="js/gmaps.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 $(document).ready(function () { 14 var path = []; 15 16 var map = new GMaps({ 17 el: '#map', 18 lat: 30.657358499999994, 19 lng: 104.049977 20 }); 21 22 //支持html5 23 GMaps.geolocate({ 24 success: function (position) { 25 var lat = position.coords.latitude, lon = position.coords.longitude; 26 var tmp = []; 27 tmp.push(lat); 28 tmp.push(lon); 29 path.push(tmp); 30 map.setCenter(lat, lon); 31 map.addMarker({ 32 lat: 30.657358499999994, 33 lng: 104.049977, 34 title: '您的位置', 35 infoWindow: { 36 content: '您在這里' 37 } 38 }); 39 }, 40 error: function (error) { 41 alert('Geolocation failed: ' + error.message); 42 }, 43 not_supported: function () { 44 alert("Your browser does not support geolocation"); 45 }, 46 always: function () { 47 } 48 }); 49 50 $('#address').change(function (e) { 51 var el = $(this); 52 GMaps.geocode({ 53 address: el.val(), 54 callback: function (r, s) { 55 if (s == 'OK') { 56 var latlng = r[0].geometry.location; 57 map.setCenter(latlng.lat(), latlng.lng()); 58 map.addMarker({ 59 lat: latlng.lat(), 60 lng: latlng.lng(), 61 title: el.val() 62 }); 63 var tmp = []; 64 tmp.push(latlng.lat()); 65 tmp.push(latlng.lng()); 66 path.push(tmp); 67 68 map.drawPolyline({ 69 path: path, 70 strokeColor: 'red', 71 strokeOpacity: 0.6, 72 strokeWeight: 2 73 }); 74 75 76 } 77 } 78 }); 79 }); 80 81 82 }); 83 </script> 84 </head> 85 <body> 86 <input type="text" value="請(qǐng)輸入地址" id="address" /> 87 <div id="map"> 88 </div> 89 90 </body> 91 </html>區(qū)域高亮顯示
我們可以指定某個(gè)區(qū)域，比如我們的學(xué)校，然后在上面浮動(dòng)一個(gè)div寫(xiě)上學(xué)校介紹，可以與css共同使用：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #map { width: 600px; height: 400px; } 7 8 </style> 9 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 11 <script src="js/gmaps.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 $(document).ready(function () { 14 var path = []; 15 16 var map = new GMaps({ 17 el: '#map', 18 lat: 30.657358499999994, 19 lng: 104.049977 20 }); 21 22 //支持html5 23 GMaps.geolocate({ 24 success: function (position) { 25 var lat = position.coords.latitude, lng = position.coords.longitude; 26 var tmp = []; 27 map.setCenter(lat, lng); 28 map.drawOverlay({ 29 lat: lat, 30 lng: lng, 31 layer: 'overlayLayer', 32 content: '<div style="border: 1px solid black; color: red;">高亮哦</div>' 33 }); 34 }, 35 error: function (error) { 36 alert('Geolocation failed: ' + error.message); 37 }, 38 not_supported: function () { 39 alert("Your browser does not support geolocation"); 40 }, 41 always: function () { 42 } 43 }); 44 45 46 }); 47 </script> 48 </head> 49 <body> 50 <input type="text" value="請(qǐng)輸入地址" id="address" /> 51 <div id="map"> 52 </div> 53 54 </body> 55 </html>右鍵菜單
我們還可以在地圖上搞菜單，搞事件哦！！！
右鍵菜單 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #map { width: 600px; height: 400px; } 7 8 </style> 9 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 11 <script src="js/gmaps.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 $(document).ready(function () { 14 var path = []; 15 16 var map = new GMaps({ 17 el: '#map', 18 lat: 30.657358499999994, 19 lng: 104.049977 20 }); 21 22 //支持html5 23 GMaps.geolocate({ 24 success: function (position) { 25 var lat = position.coords.latitude, lon = position.coords.longitude; 26 var tmp = []; 27 tmp.push(lat); 28 tmp.push(lon); 29 path.push(tmp); 30 map.setCenter(lat, lon); 31 map.addMarker({ 32 lat: 30.657358499999994, 33 lng: 104.049977, 34 title: '您的位置', 35 infoWindow: { 36 content: '您在這里' 37 } 38 }); 39 }, 40 error: function (error) { 41 alert('Geolocation failed: ' + error.message); 42 }, 43 not_supported: function () { 44 alert("Your browser does not support geolocation"); 45 }, 46 always: function () { 47 } 48 }); 49 50 map.setContextMenu({ 51 control: 'map', 52 options: [{ 53 title: '增加錨點(diǎn)', 54 name: 'addMarker', 55 action: function (e) { 56 this.addMarker({ 57 lat: e.latLng.lat(), 58 lng: e.latLng.lng(), 59 title: '新增錨點(diǎn)' 60 }); 61 this.hideContextMenu(); 62 alert('彈出菜單執(zhí)行操作'); 63 } 64 }] 65 66 }); 67 }); 68 </script> 69 </head> 70 <body> 71 <input type="text" value="請(qǐng)輸入地址" id="address" /> 72 <div id="map"> 73 </div> 74 75 </body> 76 </html>錨點(diǎn)群
最后，我們來(lái)看一個(gè)非常有用的功能
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #map { width: 600px; height: 400px; } 7 8 </style> 9 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 11 <script src="js/gmaps.js" type="text/javascript"></script> 12 <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script> 13 <script type="text/javascript"> 14 $(document).ready(function () { 15 var path = []; 16 var map = new GMaps({ 17 div: '#map', 18 lat: 30.657358499999994, 19 lng: 104.049977, 20 markerClusterer: function (map) { 21 return new MarkerClusterer(map); 22 } 23 }); 24 var lat_span = 30.657358499999994; 25 var lng_span = 104.049977; 26 for (var i = 0; i < 100; i++) { 27 var latitude = Math.random()*0.01 + 30.657358499999994; 28 var longitude = Math.random()*0.01 + 104.049977; 29 30 map.addMarker({ 31 lat: latitude, 32 lng: longitude, 33 title: 'Marker #' + i 34 }); 35 } 36 }); 37 </script> 38 </head> 39 <body> 40 <input type="text" value="請(qǐng)輸入地址" id="address" /> 41 <div id="map"> 42 </div> 43 44 </body> 45 </html>大家看到了，根據(jù)此功能可以完成復(fù)雜的應(yīng)用哦！！！
結(jié)語(yǔ)
好了，今天就到這了，經(jīng)過(guò)這次的學(xué)習(xí)，我想關(guān)于地圖的應(yīng)用應(yīng)該都不在話(huà)下了。需要源碼直接搜索GMaps.js里面去看吧，我這個(gè)都是抄襲哦。
總結(jié)
以上是生活随笔為你收集整理的【探索HTML5第二弹03】走近地图应用的世界，看我们google地图可以看些什么！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python 大数据量绘图_Matplo
- 下一篇： 前端HTML+CSS学习笔记