Jquery 的google map 应用

转载 2012年03月30日 16:31:04
[javascript] view plaincopyprint?

    <script language="javascript" type="text/javascript">  
           $(document).ready(function () {  
               $.ajax({  
                   type: "POST",  
                   url: "GetMap.ashx/ProcessRequest",  
                   dataType: "json",  
                   success: function (data) {  
                       var datalist = data;  
                       var map = new GMap2(document.getElementById("mapdiv")); //地图信息                      
                       map.addControl(new GMapTypeControl()); //选择地图类型的控件(如卫星图到二维地图的切换控件)                      
                       map.addControl(new GLargeMapControl());   //大号平移和缩放控件,位置是左上角                      
                       map.addControl(new GOverviewMapControl());  //添加鹰眼控件                       
                       map.addControl(new GScaleControl());  // 比例尺控件                      
                       map.enableGoogleBar();  //显示google搜索框                      
                       var icon = new GIcon(); //设置ICO定位                      
                       icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";  
                       icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";  
                       icon.iconSize = new GSize(12, 20);        //图片尺寸                      
                       icon.shadowSize = new GSize(22, 20);  
                       icon.iconAnchor = new GPoint(6, 20);  
                       icon.infoWindowAnchor = new GPoint(5, 1);  
                       $(datalist).each(function (index, content) {  
                           map.setCenter(new GLatLng(content.LATITUDE, content.LONGITUDE), 13);  //设置显示地图中间位置,代表地图缩放级别                          
                           var point = new GLatLng(content.LATITUDE, content.LONGITUDE);         //组合坐标点                          
                           map.addOverlay(createMarker(point, content.ADDRESS));                 //注册坐标点                      
                       })  
      
                       window.setTimeout(function () {  
                           //等待2秒,然后平移到一个新的中心点                     
                           map.panTo(new GLatLng(content.LATITUDE, content.LONGITUDE));  
                       }, 2000);  
                   },  
                   error: function (data) {  
                       alert('获取数据超时...');  
                   }   
               });  
               //显示信息函数              
      
               function createMarker(point, number) {  
                   var marker = new GMarker(point);  
                   GEvent.addListener(marker, "click", function () {  
                       marker.openInfoWindowHtml("<b>" + number + "</b>");  
                   });  
                   return marker;  
               }  
           })    
       </script>  


相关文章推荐

Jquery 的google map 应用

$(document).ready(function () { $.ajax({ type: "POST", u...

Flex Google Map桌面地图应用程序

  • 2010年06月27日 19:26
  • 554KB
  • 下载

Display the google map in jQuery ui dialog

Use the default settings, the google map can be displayed in a separate page. But, cant be displayed...
  • stefli
  • stefli
  • 2011年06月30日 15:48
  • 1061

android写的google map api 应用

  • 2013年11月17日 20:30
  • 94KB
  • 下载

google map应用实例

  • 2015年08月31日 21:20
  • 2.88MB
  • 下载

android应用开发全程实录-关于google map的部分章节-漂亮的气泡地图

12.1.2 Geopoint与MapView 在开始Google Map之前,先来认识下maps包下两个重要的类Geopoint 和MapView 。 Geopoint类是一个不可变类,...

Google Map API 应用实例说明 .

转载地址:http://www.cnblogs.com/ttc/archive/2010/10/18/1854438.html 目录 Google Map API 1基础知识 1.1 Goog...

基于Google Map的简单Android应用开发【图解】

作者:朱凌飞 一、准备工作 1.        申请Android Map API Key 必要条件:google账号以及系统的证明书。 首先找到我们的debug.keysto...
  • twlkyao
  • twlkyao
  • 2013年03月31日 15:35
  • 1209

html5中利用google map,处理当前位置相关应用

1 html页面 location.html
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery 的google map 应用
举报原因:
原因补充:

(最多只允许输入30个字)