google-map-api

 

第一步: 去http://www.google.com/apis/maps/signup.html 申请一个KeyID 第二步: 在HTML的<title></title>之间加上对MapAPI函数库的引用, <mce:script. src="http://maps.google.com/maps?file=api&v=2&key= YourKeyID" type="text/javascript"></mce:script> 第三步: 在HTML的<body></body>之间的任意位置加上一个名为map的DIV, <div id="map" style="width: 700px; height: 560px" align="center"></div> 第四步: 在名为map的DIV后面,加上GMap类的实例, <mce: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); // --></mce: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; }

你可能感兴趣的:(html,function,div)