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("对不起,您的浏览器不支持创建地图!")     
    } 
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值