如何在JSP中使用Google Map Api？

Question

如何在JSP中使用Google Map Api？

use*_*015 8 javascript jsp google-maps google-maps-api-3

我正在关注Google Map API网页中的示例代码,该网页使用JavaScript和HTML.HTML示例工作正常,但在JSP中使用JavaScript源创建Google地图不起作用.

  <%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是他们的文档.如何在JSP Source中使用Google Api v3？

Answer 1

jsj*_*kie 9

如果您上面发布的代码是您正在讨论的jsp,那么您错过了添加id为'map-canvas'的div.尝试类似下面的内容.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
 <div id="map-canvas" style="height:300px; width:500px"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

要正确渲染贴图,必须有一个元素来保持它,并且该元素必须具有确定的高度和宽度.我希望这有帮助

归档时间：	12 年前
查看次数：	20326 次
最近记录：	12 年前