Chinaunix首页 | 论坛 | 博客
  • 博客访问: 314350
  • 博文数量: 118
  • 博客积分: 2010
  • 博客等级: 大尉
  • 技术积分: 1163
  • 用 户 组: 普通用户
  • 注册时间: 2009-08-27 12:09
文章分类

全部博文(118)

文章存档

2023年(20)

2022年(3)

2021年(1)

2020年(1)

2019年(7)

2013年(2)

2011年(1)

2010年(37)

2009年(46)

我的朋友

分类: 系统运维

2009-09-01 12:45:17

Google Maps API V3入门
下面这段HTML到IE里面运行下就可以看到效果了。效果见下图。
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"">
<html xmlns="">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>My Home</title>
    <script type="text/javascript" src=""></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
/////////////////////////////////////////////
    var mapdiv = document.getElementById('map_canvas');


    var myPos = new google.maps.LatLng(31.18145038894889, 121.35056018829345); // 地図の中央座標 緯度, 経度
    var gmap = new google.maps.Map(mapdiv, {
            zoom : 16, // ズームレベルは16(詳細地図)ズームレベル(0~19)
            center : myPos, // 地図の中央座標
            mapTypeId : google.maps.MapTypeId.ROADMAP, // 地図の種類(通常の地図)
            mapTypeControl : false, // コントローラーは表示しない
            noResize : true // 自動リサイズチェック
        });
        //下面这段可以不要,只是为了显示中间的红色坐标位置用的
    var marker = new google.maps.Marker({
     position: new google.maps.LatLng(31.18145038894889, 121.35056018829345),
     map: gmap,
     title: '我家'
    });

    var infowindow = new google.maps.InfoWindow({
     content: '我家
Link'
,
     size: new google.maps.Size(500, 500)
    });
    google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(gmap,marker);
    });
    

/////////////////////////////////////////////
});

function alertT(){
    alert("I love U");
}

</script>
    </head>
    <body>
        <h1>My Home</h1>
        <div id="map_canvas" style="width : 800px; height : 600px;"></div>
    </body>
</html>

 

 

阅读(4748) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~