wayne's space

Novice's Attitude
数据加载中……
加入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的容器:
1 <div id="map">
2   
3 </div>
并通过CSS设置其大小等属性:
1 #map{
2  width: 760px;
3  height: 400px;
4 }
4.调用goMap插件的goMap()函数:
1 $(document).ready(function() {
2     $('#map').goMap();
3 });
接下来就是一些设置地图center point之类的事了,使用latitude和longitude来设置当前地图所指向的区域:
1 $(document).ready(function() {
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()函数同样可以直接使用地址来定位:
1 $('#map').goMap({
2    address : '某某地址'
3 }); // end goMap
也可以设定缩放级别:
1  $('map').goMap({
2       zoom:15
3     });
一些常用的设置选项:
maptype: 'TERRAIN'
scaleControl : true
navigationControl : false
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
如果你想动态的添加标记,则可以使用如下方法:
1 $.goMap.createMarker({
2      latitude : 45.53940,
3      longitude : -122.59025,
4      title : 'Marker 1'
5 });
相反的使用:$.goMap.clearMarkers()或者
$.goMap.removeMarker('marker1')   来去掉标记。

posted on 2011-12-03 22:02 wayne woo 阅读(201) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。


网站导航: