加入Google Maps到你的網站
1.引入Google Maps的外部Javascript文件:
1 <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
2.引入JQuery文件:1 <script src="js/jquery-1.6.3.min.js"></script>
2 <script src="js/jquery.gomap-1.3.2.min.js"></script>
3.在網頁中加入<div>對,作為Maps的容器:2 <script src="js/jquery.gomap-1.3.2.min.js"></script>
1 <div id="map">
2
3 </div>
并通過CSS設置其大小等屬性:2

3 </div>
1 #map{
2 width: 760px;
3 height: 400px;
4 }
4.調用goMap插件的goMap()函數:2 width: 760px;
3 height: 400px;
4 }
1 $(document).ready(function() {
2 $('#map').goMap();
3 });
接下來就是一些設置地圖center point之類的事了,使用latitude和longitude來設置當前地圖所指向的區域:2 $('#map').goMap();
3 });
1 $(document).ready(function() {
2 $('#map').goMap({
3 latitude : 45.53940,
4 longitude : -122.59025
5 }); // end goMap
6 }); // end ready
2 $('#map').goMap({
3 latitude : 45.53940,
4 longitude : -122.59025
5 }); // end goMap
6 }); // end ready
關于latitude和longitude可以進入此網站:http://itouchmap.com/latlong.html 在搜索框中輸入你想要定位的地址,然后點擊”Go”按鈕,就會出現相應的值。
當然,goMap()函數同樣可以直接使用地址來定位:
當然,goMap()函數同樣可以直接使用地址來定位:
1 $('#map').goMap({
2 address : '某某地址'
3 }); // end goMap
也可以設定縮放級別:2 address : '某某地址'
3 }); // end goMap
1 $('map').goMap({
2 zoom:15
3 });
一些常用的設置選項:2 zoom:15
3 });
maptype: 'TERRAIN'
scaleControl : true
navigationControl : false
5.增加標記(Marker):
相反的使用:$.goMap.clearMarkers()或者navigationControl: false
scrollwheel: false
disableDoubleClickZoom: true
mapTypeControl : false
...5.增加標記(Marker):
1 $('#map').goMap({
2 markers : [
3 {
4 latitude : 45.53940,
5 longitude : -122.59025,
6 title : 'Marker 1'
7 }
8 ]
9 }); // end goMap
如果你想動態的添加標記,則可以使用如下方法:2 markers : [
3 {
4 latitude : 45.53940,
5 longitude : -122.59025,
6 title : 'Marker 1'
7 }
8 ]
9 }); // end goMap
1 $.goMap.createMarker({
2 latitude : 45.53940,
3 longitude : -122.59025,
4 title : 'Marker 1'
5 });
2 latitude : 45.53940,
3 longitude : -122.59025,
4 title : 'Marker 1'
5 });
$.goMap.removeMarker('marker1') 來去掉標記。
posted on 2011-12-03 22:02 wayne woo 閱讀(208) 評論(0) 編輯 收藏 所屬分類: JavaScript