https://www.gov.taipei/Scripts/jGMap.js

1var $jMap = (function (MapID, txtID, Modify) {
2    var _mode = ''; //Mark Polyline Polygon
3    var _Places_markers = [];
4    var _places;
5    var _markers = {};
6
7    var _MapDiv = document.getElementById(MapID);
8    var $map = null;
9    var DefaultCenterlat = 22.627883;
10    var DefaultCenterlng = 120.290602;
11    var _infowindow = {};
12    if (!CCMS_IS_TGOS)
13        _infowindow = new google.maps.InfoWindow();
14
15    console.log("CCMS_IS_TGOS：" + CCMS_IS_TGOS);
16
17    //CCMS_IS_TGOS在SiteAPP的JavaScript中宣告
18    //if (true) {//TGOS
19    if (CCMS_IS_TGOS) {//TGOS
20        $map = new TGOS.TGOnlineMap(_MapDiv, TGOS.TGCoordSys.EPSG3857);
21        $map.setOptions({ scrollwheel: false });
22        google.maps.LatLng = function (DefaultCenterlat, DefaultCenterlng) {
23            return new TGOS.TGPoint(DefaultCenterlng, DefaultCenterlat);
24        }
25        google.maps.Marker = function (opt) {
26            var oTGOS = new TGOS.TGMarker(opt.map, opt.position, opt.title);
27            oTGOS.id = opt.id;
28            oTGOS.description = opt.description;
29            oTGOS.addListener = function (action, f) {
30
31                TGOS.TGEvent.addListener(oTGOS, action, f); //滑鼠事件監聽
32            };
33            return oTGOS;
34        }
35        _infowindow = new TGOS.TGInfoWindow();
36        _infowindow._open = _infowindow.open;
37        _infowindow.open = function (map, Mark) {
38
39            _infowindow.setPosition(Mark.position);
40            _infowindow._open(map); //滑鼠事件監聽
41        };
42        google.maps.Polyline = function (opt) {
43            if (opt) {
44                var path1 = opt.path;
45                var s1 = new TGOS.TGLineString(path1);
46                try {
47                    var oTGLine = new TGOS.TGLine($map, s1, opt);
48                    return oTGLine;
49                } catch (e) {
50                    return new TGOS.TGLine();
51                }
52
53            } else {
54                return new TGOS.TGLine();
55            }
56        }
57        google.maps.Polygon = function (opt) {
58            if (opt) {
59                var path1 = opt.paths;
60                var path2 = new TGOS.TGLineString(path1);
61                var boarder = new TGOS.TGLinearRing(path2);
62                var district1 = new TGOS.TGPolygon([boarder]);
63                try {
64                    var opolygon = new TGOS.TGFill($map, district1, opt);
65                    return opolygon;
66                } catch (e) {
67                    return new TGOS.TGFill();
68                }
69
70            } else {
71                return new TGOS.TGFill();
72            }
73        }
74
75    } else {//google Map
76        $map = new google.maps.Map(_MapDiv);
77    }
78    $map.setCenter(new google.maps.LatLng(DefaultCenterlat, DefaultCenterlng));
79    $map.setZoom(11);
80
81    var _polyline = new google.maps.Polyline();
82    var _polygon = new google.maps.Polygon();
83    var _GetMarksPositionArray = function () {
84        var arr = [];
85        for (var id in _markers) {
86            arr.push(_markers[id].getPosition());
87        }
88        return arr;
89    }
90
91    var _ClearPoly = function () {
92        try {
93            _polyline.setMap(null);
94            _polygon.setMap(null);
95        } catch (e) {
96
97        }
98
99    }
100
101    var _ChangeMode = function (mode) {
102        _mode = mode;
103        _BuildMode();
104    }
105    var _BuildMode = function () {
106        //_ClearPoly();
107        if (_mode == 'Mark') {
108
109        }
110        if (_mode == 'Polyline') {
111            _Marker2Polyline();
112
113        }
114        if (_mode == 'Polygon') {
115            _Marker2Polygon();
116        }
117    }
118
119    var _Marker2Polyline = function () {
120        //_ClearPoly();
121        _polyline = new google.maps.Polyline({
122            path: _GetMarksPositionArray(),
123            strokeColor: '#000000',
124            strokeOpacity: 1.0,
125            strokeWeight: 3
126        });
127        _polyline.setMap($map);
128    }
129
130    var _Marker2Polygon = function Marker2Polygon() {
131        //_ClearPoly();
132        _polygon = new google.maps.Polygon({
133            paths: _GetMarksPositionArray(),

134            strokeColor: '#FF0000',
135            strokeOpacity: 0.8,
136            strokeWeight: 3,
137            fillColor: '#FF0000',
138            fillOpacity: 0.35
139        });
140        _polygon.setMap($map);
141    }
142    var _AddMarker = function (oldmarker) {
143        var marker = new google.maps.Marker({
144            map: $map,
145            draggable: Modify,
146            animation: google.maps.Animation.DROP,
147            title: oldmarker.title,
148            position: oldmarker.position,
149            description: oldmarker.description,
150            id: _guid()
151        });
152
153        _markers[marker.id] = marker; // cache marker in markers object
154        marker.addListener('click', function () {
155            _SaveInfowindow(marker);
156            _infowindow.open($map, marker);
157
158        });
159    }
160
161    function _SaveInfowindow(marker) {
162        var contentString = '<div id="content">' +
163            '<div id="siteNotice">' +
164            '</div>' +
165            '<h1 id="firstHeading" class="firstHeading">' + marker.title + '</h1>' +
166            '<div id="bodyContent">' +
167            '<p>' + marker.description + '<p>' +
168            '</div>' +
169            '</div>';
170        _infowindow.setContent(contentString);
171    }
172
173    function _guid() {
174        function s4() {
175            return Math.floor((1 + Math.random()) * 0x10000)
176                .toString(16)
177                .substring(1);
178        }
179        return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
180            s4() + '-' + s4() + s4() + s4();
181    }
182
183    //寫回設定
184    var _SaveData = function (objs) {
185        var c = 0;
186        objs.forEach(function (obj) { 
187            if (obj.datas != '')
188            {
189                if (c == 0)
190                    c = obj.datas;
191                _SaveSaveMarks(obj.datas);
192                if (obj.mode == 'Mark') {
193
194                }
195                if (obj.mode == 'Polyline') {
196                    _Marker2Polyline();
197                }
198                if (obj.mode == 'Polygon') {
199                    _Marker2Polygon();
200                }
201                _markers = {}; 
202            }
203        }); 
204        if (c != 0) {
205            $map.setCenter(new google.maps.LatLng(c[0].lat, c[0].lng));
206        } else {
207            $map.setCenter(new google.maps.LatLng(25.084478, 121.562167));
208        }
209        $map.setZoom(14);
210        //_ChangeMode(objs[0].mode);
211    }
212    //加入 MarksArray 元Marks不清除
213    var _SaveSaveMarks = function (arr) {
214        if (arr == null || arr.length == 0) return false;
215        arr.forEach(function (marker) {
216            marker.position = new google.maps.LatLng(marker.lat, marker.lng);
217            _AddMarker(marker);
218        });
219    }
220    var _ClearAllMarkers = function () {
221        for (var id in _markers) {
222            _markers[id].setMap(null);
223        }
224        _markers = {};
225        _ChangeMode('Mark');
226    }
227
228    return {
229        map: $map,
230        SaveData: _SaveData,
231        Clear: _ClearAllMarkers
232    }
233
234});