Google map v3嵌入到JSP中

最新推荐文章于 2021-05-20 11:46:56 发布

jiayi_it

最新推荐文章于 2021-05-20 11:46:56 发布

阅读量1.5k

点赞数

文章标签： Google map v3嵌入到JSP中地图

本文链接：https://blog.csdn.net/jiayi_it/article/details/19041895

版权

由于项目中要用到google map，于是研究了一段时间，在网上查了很多资料，发现把V2，V3版本弄得很混杂，然后走了很多弯路，所以分享一下最终解决方案供大家参考：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#map_canvas {
	height: 460px;
	overflow: hidden;
	width: 950px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
	function initialize() {
	    var latlng = new google.maps.LatLng(22.72353471780841, 113.91738653182983); //纬度、经度
	    var mapOptions = {
	   	    zoom: 8, //地图放大级别
 	   	    center: latlng,
	   	    mapTypeId: google.maps.MapTypeId.ROADMAP
		};
	    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	    var icon="http://labs.google.com/ridefinder/images/mm_20_green.png";
	    var title = "<span style='font-size:18px;color:#ffae00; font-weight:bold'>我的位置</span>";
	    var html = "<div style='width:180px;line-height:24px;font-size:12px;color:#666;'>"+ title +
		    		                   "<div>纬度:"+latlng.getLat()+"<br/>"+
		    		                   "经度:"+latlng.getLng()+"</div>"+
		    		                  "</div>";
	    createMarker(map, latlng, html, icon);
	}
	function createMarker(map, point, html, icon) {
	    var infowindow = new google.maps.InfoWindow({
	        maxWidth: 400,
	        content: html
	    });
	    var marker = new google.maps.Marker({
	        position: point,
	        map: map,
	        icon: icon,  //图标，可以换成自定义的
	        title: ''
	    });

	    google.maps.event.addListener(marker, 'mousemove', function () {
	        infowindow.open(map, marker);
	    });

	    google.maps.event.addListener(marker, 'click', function () {
	        window.location.href = ""

	    });
	    google.maps.event.addListener(marker, 'mouseout', function () {
	        infowindow.close(map, marker);
	    });
	    return marker;
	}
</script>
</head>
<body οnlοad="initialize()">
<div id="map_canvas"></div>
</body>
</html>

jiayi_it

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google map v3嵌入到JSP中

由于项目中要用到google map，于是研究了一段时间，在网上查了很多资料，发现把V2，V3版本弄得很混杂，然后走了很多弯路，所以分享一下最终解决方案供大家参考：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% String path = reques
复制链接

扫一扫