非常感谢:http://67566894.iteye.com/
Google的地图API很完善,用起来也不复杂。我通过JavaScript实现了一个简单的Google地图,并带有地图标记。
如果你的网站有域名而不是localhost,则需要根据域名在Google官网上申请一个KEY,替换我提供的代码中的key。
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <script
- src="http://maps.google.com/maps?file=api&v=2&sensor=true;
- key=ABQIAAAAevysxt9O5lBUCrSalm80MxQx8gmx0K-_Fjj4Tf8bNXH3BBSxZRRmI_CuZM2zQyuXEpG_uxt-aqPr-A"
- type="text/javascript"></script>
- //author:67566894 <script language="javascript" type="text/javascript">
- function load() { //加载地图
- if (GBrowserIsCompatible()) {
- var map = new GMap2(document.getElementById("map"));
- map.addControl(new GSmallMapControl()); //放大缩小
- map.addControl(new GMapTypeControl()); //地图种类
- map.enableScrollWheelZoom(); //启用鼠标滚轮
- map.setCenter(new GLatLng(39.9000, 116.3000), 6); //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"
- function createMarker(point, address,name,tel) { //创建标记内容及标记的鼠标事件
- var marker = new GMarker(point);
- var html = '<div>'+
- '<a >Name:'+ name +'</a><br/>'+
- '<a >Address:'+address +'</a><br/>'+
- '<a >telephone:'+tel +'</a>'+
- '</div>';
- GEvent.addListener(marker, "mouseover", function() {
- marker.openInfoWindowHtml(html);
- });
- GEvent.addListener(marker, "mouseout", function() {
- marker.closeInfoWindow();
- });
- GEvent.addListener(marker, "click", function() {
- map.setCenter(point, 12);
- });
- return marker;
- }
- var point = new GLatLng(39.9000,116.3000); //设置标记
- map.addOverlay(createMarker(point,'beijing','sh','123456'));//加入标记
- }
- }
- </script>
- </head>
- <body οnlοad="load()">
- <div id="map" style="width: 750px; height: 500px"></div>
- </body>
- </html>