V3 -- Hello World

最新推荐文章于 2024-09-11 15:33:18 发布

icanhaha

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量666

点赞数

分类专栏： GIS开发文章标签： javascript xhtml google html api function

本文链接：https://blog.csdn.net/icanhaha/article/details/7693375

版权

GIS开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
    <title>Google 地图 JavaScript API 示例: 简单的地图</title>   
    <%– 加载 Google 地图 API JavaScript–%>   
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>   
    <script type="text/javascript">   
    var map;   
    //地图初始化   
    function initialize() {   
        var mapOptions = {         
            zoom: 14,                //缩放级别     
            center: new google.maps.LatLng(31.838463501293745, 117.17588437182617),       //将地图的中心设置为指定的地理点                  mapTypeId: google.maps.MapTypeId.ROADMAP,   //ROADMAP-默认视图 SATELLITE-显示Google地球卫星图像 HYBRID-混合显示普通视图和卫星视图 TERRAIN-地形图    
            scaleControl: true,    //比例尺   
            mapTypeControl: true,       
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}   
        };   
        map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);//编写 JavaScript 函数创建“map”对象   
    }     
   </script>   
</head>   
<body οnlοad="initialize()">   
    <form id="form1" runat="server">   
    <%–创建名为“map_canvas”的 div 元素来包含地图–%>   
    <div id="map_canvas" style="width: 800px; height: 600px">   
    </div>   
    </form>   
</body>   
</html>

V2 和V3的不同：

marker         V2 GMarker
                      V3 google.maps.Marker

纬经度          V2 GLatLng
                     V3 google.maps.LatLng

信息窗口      V2 GInfoWindow
                     V3 google.maps.InfoWindow

注册事件     V2 GEvent.addListener
                      V3 google.maps.event.addListener

引入js文件

v2 http://ditu.google.cn/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN

v3 http://maps.google.com/maps/api/js?sensor=true