https://dehgardi.ir/Map

1
2<title>نقشه | دهگردی</title>
3<link rel="apple-touch-icon" sizes="180x180" href="/images/logo.png">
4<link rel="icon" type="image/png" sizes="32x32" href="/images/logo.png">
5<link rel="icon" type="image/png" sizes="16x16" href="/images/logo.png">
6<link rel="shortcut icon" href="/images/logo.png">
7
8<link href="/css/CustomMap.css" rel="stylesheet" />
9<link href="/admin/lib/leaflet/leaflet.min.css" rel="stylesheet" />
10<link href="/css/room/lc_lightbox.css" rel="stylesheet" />
11<link href="/css/dark.css" rel="stylesheet" />
12<link href="/admin/lib/toastr.js/toastr.min.css" rel="stylesheet" />
13
14<img src="/images/menu_black.png" class="search-menu-box  searchImg" style="position:absolute;top:10px;right:10px;z-index:11;background-color:white;" />
15
16<div class="search-box search">
17    <input type="text" class="search-input-box" placeholder="جستجو در دهگردی" />
18
19    <div class="search-icon-box"></div>
20    <div class="clear-icon-box" hidden></div>
21    <div class="lds-ring" hidden>
22        <div></div><div></div><div></div><div></div>
23    </div>
24
25</div>
26<div class="search-type-box search">
27    <div class="search-type-item">
28        <label class="radio-inline">
29            <input type="radio" class="searchtypevalue" value="1" checked name="searchtype">
30            <div class="time-inner">
31                <img src="/images/place_grey.png" alt="place" />
32                <h4>اماکن</h4>
33            </div>
34        </label>
35    </div>
36    <div class="search-type-item">
37        <label class="radio-inline">
38            <input type="radio" class="searchtypevalue" value="2" name="searchtype">
39            <div class="time-inner">
40                <img src="/images/attractions_black_18dp.png" alt="attraction" />
41                <h4>جاذبه ها</h4>
42            </div>
43        </label>
44    </div>
45    <div class="search-type-item">
46        <label class="radio-inline">
47            <input type="radio" class="searchtypevalue" value="3" name="searchtype">
48            <div class="time-inner">
49                <img src="/images/black-house-icon-map.png" alt="house" />
50                <h4>اقامتگاه</h4>
51            </div>
52        </label>
53    </div>
54</div>
55
56<div class="search-result-box" hidden>
57    <div class="search-result-partial"></div>
58</div>
59
60<div class="search-information-box" hidden>
61    <div class="search-info-load"></div>
62</div>
63
64<div id="map" class="map"></div>
65
66<span class="remove-slide slide-show">X</span>
67<div class="slider slide-show">
68    <div class="slide-image">
69        <div class="slide-image-list"></div>
70    </div>
71</div>
72
73<div class="search-pictures-load"></div>
74
75

76<script src="/lib/jquery/dist/jquery.min.js"></script>

76

77<script src="/lib/jqueryui/jquery-ui.min.js"></script>

77

78<script src="/admin/lib/leaflet/leaflet.min.js"></script>

78

79<script src="/js/room/lc_lightbox.lite3b34.js?v=3.391"></script>

79

80<script src="/js/alloy_finger.min.js"></script>

80

81<script src="/js/CustomMap.js"></script>

81

82<script src="/admin/lib/toastr.js/toastr.min.js"></script>

82
83

84<script>
85    lc_lightbox('.elem', {
86        wrap_class: 'lcl_fade_oc',
87        gallery: true,
88        thumb_attr: 'data-lcl-thumb',
89    });
90</script>

90

91<script>
92    var ClickedMarker;
93
94    map.on('dblclick', function (e) {
95        if (ClickedMarker != undefined) {
96            map.removeLayer(ClickedMarker);
97        }
98        AddMarkerOnClick(e.latlng);
99    });
100
101    function AddMarkerOnClick(latLng) {
102        ClickedMarker = new L.marker(latLng, { icon: MeIcon }).addTo(map);
103
104        $(".latitude").val(latLng.lat);
105        $(".longitude").val(latLng.lng);
106        currentLat = latLng.lat;
107        currentLng = latLng.lng;
108
109        GetBoundedLocation();
110    }
111</script>

111

112<script>
113    var MeIcon = new L.Icon({
114        iconUrl: '/images/96290-200.png',
115        shadowUrl: '/images/marker-shadow.png',
116        iconSize: [35, 41],
117        iconAnchor: [12, 41],
118        popupAnchor: [1, -34],
119        shadowSize: [41, 41]
120    });
121    var HouseIcon = new L.Icon({
122        iconUrl: '/images/black-house-icon-map.png',
123        shadowUrl: '/images/marker-shadow.png',
124        iconSize: [41, 41],
125        iconAnchor: [12, 41],
126        popupAnchor: [1, -34],
127        shadowSize: [41, 41]
128    });
129    var AtractionIcon = new L.Icon({
130        iconUrl: '/images/Atraction.png',
131        shadowUrl: '/images/marker-shadow.png',
132        iconSize: [41, 41],
133        iconAnchor: [12, 41],
134        popupAnchor: [1, -34],
135        shadowSize: [41, 41]
136    });
137
138    var removeBoundedMarkers = [];
139    var navigateMarker;
140    var currentUser;
141    var currentLat;
142    var currentLng;
143    navigator.geolocation.getCurrentPosition(function (location) {
144        currentLat = location.coords.latitude;
145        currentLng = location.coords.longitude;
146
147        currentUser = new L.LatLng(location.coords.latitude, location.coords.longitude);
148        navigateMarker = new L.marker(currentUser, { icon: MeIcon }).addTo(map)
149
150        var markerBounds = L.latLngBounds([currentUser]);
151        map.fitBounds(markerBounds);

152        map.setView([currentUser.lat, currentUser.lng], 12);
153
154        GetBoundedLocation();
155    });
156
157    //var lat = 36.9077275344348;
158    //var lng = 54.85675317512294;
159    //var str='<br/><a data-login-modal="" href="logine6ac.html?lang=fa" data-redirect="" class="link-reset login_popup_head">ورود</a>';
160    function GetBoundedLocation() {
161        var TypeSearch = $('input[name="searchtype"]:checked').val();
162        if ('False' == 'False') {
163            toastr.error("برای نمایش موقعیت مکانی «اماکن،اقامتگاهها،جاذبه های گردشگری و سایر خدمات» ابتدا وارد سایت شوید", null, {
164                "timeOut": 10000,
165                "progressBar": true,
166                "positionClass": "toast-top-right"
167            });
168            return;
169        }
170        var pagename = 'Place';
171        if (TypeSearch == 2)
172            pagename = 'Attractions';
173        else
174            if (TypeSearch == 3)
175                pagename = 'house';
176        $.ajax({

177            url: "/Home/GetBoundedLoaction",
178            type: "GET",
179            data: {
180                lat: currentLat,
181                lng: currentLng,
182                TypeSearch: TypeSearch
183            },
184            success: function (markers) {
185
186                var boundedMarkers = [];
187                for (var i = 0; i < markers.length; i++) {
188                    var contentPopup = '<div class="image-popup">' +
189                        '<b class="location-name">' + markers[i].name + '</b>' +
190                        '<a href="/' + pagename + '/' + markers[i].zoneId + '" target="_blank">' +
191                        '<img src="/ShowImage/' + markers[i].zoneId + '/' + markers[i].fileId + '/' + TypeSearch + '" width="300" height="150" />' +
192                        '</a>' +
193                        '<a style="cursor: pointer;" onClick="DirectiontoGoogleMap(' + currentLat + ', ' + currentLng + ', ' + markers[i].latitude + ', ' + markers[i].longitude + ')">مسیریابی روی نقشه</a>' +
194                        '<span onClick="DisplayShow(' + markers[i].zoneId + ',' + TypeSearch + ')">تصاویر</span>' +
195                        '</div>';
196
197                    var marker = {
198                        lat: markers[i].latitude,
199                        lng: markers[i].longitude
200                    };
201
202                    boundedMarkers.push(marker);
203                    //                    navigateMarker = new L.marker(currentUser).addTo(map)
204                    if (TypeSearch == 3) {
205                        var removeBoundedMarker = new L.marker(marker, { icon: HouseIcon }).addTo(map).bindPopup(contentPopup, { maxWidth: "200px" });
206                        removeBoundedMarkers.push(removeBoundedMarker);
207
208                    } else
209                        if (TypeSearch == 2) {
210                            var removeBoundedMarker = new L.marker(marker, { icon: AtractionIcon }).addTo(map).bindPopup(contentPopup, { maxWidth: "200px" });
211                            removeBoundedMarkers.push(removeBoundedMarker);
212
213                        } else {
214                            var removeBoundedMarker = new L.marker(marker).addTo(map).bindPopup(contentPopup, { maxWidth: "200px" });
215                            removeBoundedMarkers.push(removeBoundedMarker);
216                        }
217                }
218                //var group = new L.featureGroup(boundedMarkers);
219                map.fitBounds([boundedMarkers]);
220            }
221        })
222    }
223
224    //MarkerLocationToMap();
225    function MarkerLocationToMap(markers) {
226
227        //var marker = {
228        //    lat: 36.9077275344348,
229        //    lng: 54.85675317512294
230        //};
231
232        //var markers = [
233        //    { lat: 36.91436865107897, lng: 54.84882635290953 },
234        //    { lat: 36.907044166707514, lng: 54.85037154771653 },
235        //    { lat: 36.91448745048522, lng: 54.861344195635915 },
236        //    { lat: 36.902664839913854, lng: 54.865862064595426 }
237        //];
238
239        //var contentPopup = '<div class="image-popup">' +
240        //    '<a href="#">' +
241        //    '<img src="/images/afratakhte.png" width="300" height="150" />' +
242        //    '</a>' +
243        //    '<a onClick="DirectiontoGoogleMap(36.8318869, 54.441161, 36.902664839913854, 54.865862064595426)">مسیریابی روی نقشه</a>' +
244        //    '<span onClick="DisplayShow()">تصاویر</span>' +
245        //    '</div>';
246
247        //var existMarker = new L.marker(marker, { icon: MeIcon }).addTo(map)
248        //    .bindPopup(contentPopup, { maxWidth: "200px" }).openPopup();
249
250        //existMarker.bindPopup(contentPopup, {
251        //    maxWidth: "300px"
252        //}).openPopup();
253
254        //for (var i = 0; i < markers.length; i++) {
255        //    L.marker(markers[i]).addTo(map).bindPopup(contentPopup, { maxWidth: "200px" });
256        //}
257
258        // رسم شعاع بر اساس نقطه تعیین شده
259        //const circle = L.circle(['36.9077275344348', '54.85675317512294'], 1100, { color: 'green' }).addTo(map);
260
261        //دریافت شعاع
262        //const circle = L.circle([newMarker.locationVM.lat, newMarker.locationVM.lng], 100, { color: 'green' }).addTo(map);
263        // انتقال خودکار به شعاع تعیین شده دفتر دهیاری
264        //map.fitBounds(circle.getBounds(), { maxZoom: 17 });
265
266        // انتقال خودکار به مکان تعیین شده
267        //var latLngs = [existMarker.getLatLng()];
268        //var markerBounds = L.latLngBounds(latLngs);
269        //map.fitBounds(markerBounds);

270        //map.setView([marker.lat, marker.lng], 12);
271
272        ////انتقال خودکار به محل چندین مارکر
273        //var group = new L.featureGroup(markers);
274        //map.fitBounds(group.getBounds());
275    }
276
277    function DirectiontoGoogleMap(slat, slng, elat, elng) {
278        var url = "https://www.google.com/maps?saddr=" + slat + "," + slng + "&daddr=" + elat + "," + elng;
279        window.open(url, '_blank');
280    }
281</script>

281
282
283<!--image slide-->

284<script>
285
286
287    $(".slide-show").hide();
288    function DisplayShow(zoneId, TypeSearch) {
289        var pagename = 'Place';
290        if (TypeSearch == 2)
291            pagename = 'Attractions';
292        else
293            if (TypeSearch == 3)
294                pagename = 'house';
295
296        $.ajax({
297            url: "/Home/GetPicturesForMap",
298            data: { zoneId: zoneId, TypeSearch: TypeSearch },
299            type: "GET",
300            success: function (data) {
301                var slideImages = "";
302
303                for (var i = 0; i < data.length; i++) {
304                    slideImages += '<img src="/ShowImage/' + zoneId + '/' + data[i] + '/' + TypeSearch + '" alt="picture-' + i + '" width="300" height="150" />';
305                }
306
307                $(".slide-image-list").html(slideImages);
308
309                $(".slide-show").show();
310                $(".slider").css({
311                    'opacity': '1',
312                    'bottom': '0',
313                })
314            }
315        })
316    }
317    $(".remove-slide").click(function () {
318        $(".slider").css({
319            'opacity': '0',
320            'bottom': '-50',
321        })
322        $(".slide-show").hide();
323    })
324</script>

324