liuxiaolong
2019-05-09 0d1d88cdb668e75ea8609417ac18ae19947e9525
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<%@page import="java.io.File"%>
<%@page import="com.jeeplus.common.utils.ImageGeo"%>
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ include file="/webpage/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
    <title>地图显示 - 读取图片GPS信息</title><!-- 
    <script type="text/javascript" src="mapapi3.8.6.js"></script> -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        <%
            ImageGeo geo = new ImageGeo(request.getRealPath("static/map/IMAG0068.jpg"));
        %>
 
        // 地图服务地址
        var strURL = "http://192.168.11.233:8780/maptile/googlemaps/roadmap/"
    
        function LocalMapType() {}
        LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
        LocalMapType.prototype.maxZoom = 16;   //地图显示最大级别
        LocalMapType.prototype.minZoom = 4;    //地图显示最小级别
        LocalMapType.prototype.name = "本地";
        LocalMapType.prototype.alt = "显示本地地图数据";
        LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
            var img = ownerDocument.createElement("img");
            img.style.width = this.tileSize.width + "px";
            img.style.height = this.tileSize.height + "px";
            img.src = strURL + zoom + "/" + coord.x + "/" + coord.y + ".png";
            return img;
        };
      
        var localMapType = new LocalMapType();
         
        function initialize() {
          var myLatlng = new google.maps.LatLng(<%=geo.lat%>, <%=geo.lon%>);
          var myOptions = {
            center: myLatlng,
            zoom: 12,
            streetViewControl: false,
             mapTypeControlOptions: {
                mapTypeIds: [
                   //google.maps.MapTypeId.ROADMAP,
                   //google.maps.MapTypeId.HYBRID,
                   //google.maps.MapTypeId.SATELLITE,
                   //google.maps.MapTypeId.TERRAIN,
                   //'locaMap' //定义地图类型
                 ] 
            }
          };
          var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          
          map.mapTypes.set('locaMap', localMapType);   //绑定本地地图类型
          //map.setMapTypeId('locaMap');    //指定显示本地地图
          
          var marker = new google.maps.Marker({
              position: myLatlng, 
              map: map,
              //draggable: true,
              //icon: 'mapfiles/rotate2.png',  
              //animation :google.maps.Animation.DROP,
              title: "点击我!"
          });
          
          var infowindow = new google.maps.InfoWindow();
        
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent("当前位置: " + marker.getPosition().toUrlValue(14));
            infowindow.open(map, this);
          });
          
        }
    </script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>