当前位置: 代码迷 >> Web前端 >> Google Map API 根本使用方法
  详细解决方案

Google Map API 根本使用方法

热度:108   发布时间:2012-09-16 17:33:17.0
Google Map API 基本使用方法

方法说明:
???1、GBrowserIsCompatible()?--?是否支持Google?Map?API
???2、shopLat?--?酒店的经度坐标,
??????shopLng?--?酒店的纬度坐标?
???3、new?GLatLng(shopLat,?shopLng)?--?设置经纬度
???4、map.setCenter(new?GLatLng(shopLat,?shopLng),?14)?--?设置地图默认的中心点经纬度?
??????参数说明:?
??????new?GLatLng(shopLat,?shopLng)?--?设置中心点的经纬度
??????14?--?地图的默认缩放比例大小值,范围为1?-?18
???5、new?GMap2(document.getElementById("shopgooglemap"))?--?获取显示的地图容器
???6、map.setMapType(G_NORMAL_MAP);?--?设置显示地图的类型
??????可选值:
??????1.?G_NORMAL_MAP?--?默认地图样式
??????2.?G_SATELLITE_MAP?--?Google?Earth?卫星地图
??????3.?G_HYBRID_MAP?--?混合模式地图
???7、new?GIcon(G_DEFAULT_ICON)?--?设置标记样式
???8、addControl()?--?给地图添加控件
??????常用的可选控件:
??????1.?new?GLargeMapControl()?--?大的地图缩放级别控件
??????2.?new?GOverviewMapControl()?--?地图缩略图控件??
??????3.?new?GScaleControl()?--?比例尺控件
??????4.?new?GMapTypeControl()?--?地图类形选择控件
???9、enableDoubleClickZoom()?--?双击(鼠标右键)放大/(鼠标左键)缩小地图比例
??10、map.enableScrollWheelZoom()?--?滚动滑轮方法(向前)放大/(向后)缩小地图比例
??11、enableContinuousZoom()?--?允许连贯改变地图比例
??12、createMarker(latlng)?--?自定义方法:
??????方法说明:
??????new?GMarker(latlng)?--?在地图中设置标签,参数latlng?--?标签的坐标
??????Event.addListener(marker,event,function)?--?给标签设置事件?
??????参数说明:
??????marker?--?标签对象,
??????event?--?事件名称
??????function?--?时间的处理函数
??????openInfoWindowHtml(latlng,?myHtml)?--?将信息框添加到标签上
??????参数说明:
??????latlng?--?标签坐标,
??????myHtml?--?提示信息的HTML字符串
===============================================================================??
获取地图中心坐标:javascript:void(prompt('中心坐标',gApplication.getMap().getCenter()));????????
===============================================================================

?

?

function initMap(){ 
    if(GBrowserIsCompatible()){ 
         var shopLat=message[0][0]; 
         var shopLng=message[0][1]; 
          
         var map = new GMap2(document.getElementById("shopgooglemap")); 
         map.setCenter(new GLatLng(shopLat, shopLng), 14); 
              
         function createMarker(latlng){ 
            var marker = new GMarker(latlng); 
                marker.value=0; 
             
            GEvent.addListener(marker,"click", function(){ 
                var myHtml = "<span id=\"shopInfo\">"; 
                    myHtml += "<h2>" + message[1][0] + "</h2><br />"  
                for(var j=1;j<message[1].length;j++){ 
                    myHtml += message[1][j]+"<br />"; 
                }  
                    myHtml +="</span>"; 
                map.openInfoWindowHtml(latlng, myHtml); 
                } 
            ); 
            return marker; 
         } 

         var point = new GLatLng(shopLat,shopLng); 
         map.addOverlay(createMarker(point)); 
          
         map.enableDoubleClickZoom(); 
         map.enableScrollWheelZoom();  
         map.enableContinuousZoom();  
         
         map.addControl(new GLargeMapControl()) 
         map.addControl(new GOverviewMapControl()); 
         map.addControl(new GScaleControl());   
    } 
    else{ 
        alert("对不起,您的浏览器不支持创建地图!")     
    } 
}

?

  相关解决方案