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

来源：互联网发布：存储阵列挂不上 linux 编辑：程序博客网时间：2024/06/03 15:11

注意：

通过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>

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

注意：

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

google map api入门教程

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