ソースを参照

Fix input focus en mapa

Guillermo Espinoza 8 年 前
コミット
98e66fb06e

+ 31 - 14
Resources/public/js/leaflet-map-widget.js

@@ -1,20 +1,32 @@
 var geocoder;
 
 $(document).ready(function () {
+    placeholder = 'Buscar...';
+    
     geocoder = new google.maps.Geocoder();
 
     map.addControl(new L.Control.Search({
         sourceData: googleGeocoding,
         formatData: formatJSON,
         markerLocation: true,
-        autoType: false,
-        autoCollapse: true,
-        minLength: 2,
-        position: 'topright'
+        autoType: true,
+        autoCollapse: false,
+        minLength: 3,
+        position: 'topright',
+        delayType: 1,
+        tooltipLimit: -1,
+        firstTipSubmit: true,
+        autoResize: false,
+        collapsed: false,
+        textPlaceholder: placeholder
     }));
 
+    map.on('zoomend', function () {
+        setDataValue();
+    });
+
     $('.search-button').on('click', function () {
-        if (loc) {
+        if (loc && $('.search-input').val() !== placeholder) {
             drawMarker();
             setDataValue();
         }
@@ -28,17 +40,22 @@ $(document).ready(function () {
             setDataValue();
         }
     });
-
-    map.on('zoomend', function () {
-        setDataValue();
-    });
-
-    map.on('click', function (e) {
-        loc = new L.latLng(e.latlng);
-        drawMarker();
-        setDataValue();
+    
+    $('.search-tooltip').on('click', function() {
+        var tooltip = $(this).children('.search-tip');
+        var location = '';
+        if (tooltip) {
+            location = tooltip.html();
+        }
+        if (location !== '') {
+            $('.search-input').val(location);
+            $('.search-tooltip').css('display', 'none');
+            $('.search-button').trigger('click');
+        }
     });
+    
 });
+
 function setDataValue()
 {
     var jsonParseData = {};

+ 6 - 0
Resources/views/Leaflet/map.html.twig

@@ -5,6 +5,12 @@
         height: 400px; 
         border: 1px solid #CCCCCC;
     }
+    .leaflet-control-search.search-exp.leaflet-control {
+        width: 400px !important;
+    }
+    .search-input {
+        width: 370px !important;
+    }
 </style>
 {% include 'LeafletBundle:Leaflet:resources.html.twig' %}