Google地图API 在网站上嵌入谷歌地图API

最新推荐文章于 2020-02-24 23:54:15 发布

sh之活跃

最新推荐文章于 2020-02-24 23:54:15 发布

阅读量97

点赞数

分类专栏： java 文章标签： Google JavaScript HTML ViewUI

java 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Google的地图API很完善，用起来也不复杂。我通过JavaScript实现了一个简单的Google地图，并带有地图标记。直接将代码粘在html文件中就可运行。
如果你的网站有域名而不是localhost，则需要根据域名在Google官网上申请一个KEY，替换我提供的代码中的key。
欢迎来我的博客：http://67566894.iteye.com/

<%@ 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>

sh之活跃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google地图API 在网站上嵌入谷歌地图API

Google的地图API很完善，用起来也不复杂。我通过JavaScript实现了一个简单的Google地图，并带有地图标记。直接将代码粘在html文件中就可运行。如果你的网站有域名而不是localhost，则需要根据域名在Google官网上申请一个KEY，替换我提供的代码中的key。欢迎来我的博客：http://67566894.iteye.com/[code="java"]...
复制链接

扫一扫

专栏目录