Fatal编程技术网
  • javascript/
  • Javascript 如何在JSP中使用GoogleMapAPI？

Javascript 如何在JSP中使用GoogleMapAPI？

javascript jsp google-maps google-maps-api-3

Javascript 如何在JSP中使用GoogleMapAPI？,javascript,jsp,google-maps,google-maps-api-3,Javascript,Jsp,Google Maps,Google Maps Api 3,下面是使用JavaScript和HTML的GoogleMapAPI网页的示例代码。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/

下面是使用JavaScript和HTML的GoogleMapAPI网页的示例代码。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>


在此处插入标题
var映射；
函数初始化（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（-34.397150.644）
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
这是他们的。如何在JSP源代码中使用Google Api v3？

如果您上面发布的代码是您正在讨论的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>


在此处插入标题
var映射；
函数初始化（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（-34.397150.644）
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
要正确渲染贴图，必须有一个元素来容纳它，并且该元素必须具有一定的高度和宽度。我希望这有助于

将脚本标记放在head部分，并在jsp主体中添加一个id为“map canvas”的div。确保此div具有固定的高度和宽度。我希望这不会有任何问题。@jsjunkie抱歉，但无法理解您的答案：（这里有示例代码吗？当您声明变量如var marker=new Latlng（..）时，多标记非常容易）。确保每对lat-long都有单独的var标记，否则最后一个将替换所有。请为关键答案添加一些代码。太棒了。我花了很长时间才找到这篇文章。谢谢。