开发学院网页设计 JavaScript 10分钟学会Google Map API （一）阅读

10分钟学会Google Map API （一）

　2009-07-02 20:13:52　来源：WEB开发网　　　

核心提示：前几天玩了玩Google的Map API，感觉还不错，10分钟学会Google Map API （一），很简单，但凡有过任何编程经验的同学， <script. type="text/Javascript"> //创建GMap类的实例 var map = new GMap(docu

前几天玩了玩Google的Map API，感觉还不错，很简单。但凡有过任何编程经验的同学，看完以下的教程，都可以在10分钟内掌握它的主要功能。另外我还做了个简单的小例子，有兴趣的话，请参见http://sunjian100.googlepages.com/map.html ：]

　第一步：
　去http://www.google.com/apis/maps/signup.html 申请一个KeyID

　第二步：
　在HTML的<title></title>之间加上对MapAPI函数库的引用，
　 <script. src="http://maps.google.com/maps?file=api&v=2&key= YourKeyID" type="text/javascript"></script>

　第三步：
　在HTML的<body></body>之间的任意位置加上一个名为map的DIV，
　 <div id="map" style="width: 700px; height: 560px" align="center"></div>

　第四步：
　在名为map的DIV后面，加上GMap类的实例，
　　　 <script. type="text/Javascript">
　　　 //创建GMap类的实例
　　　 var map = new GMap(document.getElementById("map"));
　　　 //添加一个控制条
　　　 map.addControl(new GSmallMapControl());
　　　 //设置显示模式为卫星影像
　　　 map.setMapType(G_SATELLITE_TYPE);
　　　 //设置中心点经纬度（上海）和缩放系数，并显示
　　　 map.centerAndZoom(new GPoint(121.4838, 31.2517), 4);
　　　 </script>

　第五步：
　随机增加10个标记点，
　 var bounds = map.getBoundsLatLng();
　 var width = bounds.maxX - bounds.minX;
　 var height = bounds.maxY - bounds.minY;
　 for (var i = 0; i < 10; i++) {
　　　 var point = new GPoint(bounds.minX + width * Math.random(),
　　　　　　　　 bounds.minY + height * Math.random());
　　　 var marker = createMarker(point, i + 1);
　　　 //添加标记点
　　　 map.addOverlay(marker);
　 }

　第六步：
　添加事件响应，
　　　 function createMarker(point, number)
　　　 {
　　　　　 var marker = new GMarker(point);

　　　 // Show this marker's index in the info window when it is clicked.
　　　　　 var html = "Marker #<b>" + number + "</b>";
　　　　　 GEvent.addListener(marker, 'click', function() {
　　　　　 marker.openInfoWindowHtml(html);});

　　　 return marker;
　　　　 }