您的位置：首页 > Web前端 > JavaScript

Jsp 页面 调用 google API 地图的实现

2013-06-18 18:14 579 查看


注意：
















通过JavaScript实现了一个简单的Google地图，并带有地图标记。

如果你的网站有域名而不是localhost，则需要根据域名在Google官网上申请一个KEY，替换代码中的key。

学习网站 https://developers.google.com/maps/documentation/javascript/reference?hl=zh-CN#Map


google map api入门教程



<%@ 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 onload="load()">

<div id="map" style="width: 750px; height: 500px"></div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航