Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="row">
- <div class="col-md-12">
- <div class="form-field-default">
- <label>Localização:</label>
- <div id="location-map" style="background:#fff;border:none;height:440px;width:100%;box-sizing:border-box"></div>
- <input type="hidden" name="endereco_latlng" value="">
- </div>
- <div class="clear"></div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-3">
- <div class="form-field-default">
- <label>CEP</label>
- <input class="maskcep" type="text" name="endereco_cep" placeholder="CEP" value="">
- </div>
- </div>
- <div class="col-md-7 col-xs-9">
- <div class="form-field-default">
- <label>Rua</label>
- <input type="text" name="endereco_rua" placeholder="Rua" value="">
- </div>
- </div>
- <div class="col-md-2 col-xs-3">
- <div class="form-field-default">
- <label>Nº</label>
- <input type="text" name="endereco_numero" placeholder="Nº" value="">
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <div class="form-field-default">
- <label>Bairro</label>
- <input type="text" name="endereco_bairro" placeholder="Bairro" value="">
- </div>
- </div>
- </div>
- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
- <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.css">
- <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
- <script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"></script>
- <script src="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.js"></script>
- <script>
- function showMap() {
- setTimeout(function() {
- const targetId = "location-map";
- const $map = $('#' + targetId);
- const $latlng = $("[name='endereco_latlng']");
- const $nome = $("[name='nome']");
- const latlng = JSON.parse($latlng.val());
- const origin = L.marker(latlng);
- const apikey = "ARCGIS_API_KEY";
- if ($map.data('already-mounted')) {
- return;
- }
- $map.attr('data-already-mounted', true)
- const map = L.map(targetId, {
- maxZoom: 16,
- minZoom: 12,
- zoomControl: false
- });
- const geocodeService = L.esri.Geocoding.geocodeService({
- apikey
- });
- const providers = [
- L.esri.Geocoding.arcgisOnlineProvider({
- apikey,
- countries: ['BRA'],
- })
- ];
- map.setView(origin.getLatLng(), 16).on("click", handleClick);
- origin.addTo(map);
- L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
- attribution: "Map data © < a href = \"https://openstreetmap.org\">OpenStreetMap < /a>",
- }).addTo(map);
- L.control.zoom({
- position: 'bottomright'
- }).addTo(map);
- L.esri.Geocoding.geosearch({
- providers,
- expanded: true,
- useMapBounds: false,
- collapseAfterResult: false,
- placeholder: 'Pesquisar',
- }).addTo(map).on("results", handleClick);
- function handleClick(e) {
- geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
- if (Boolean(error) == false) {
- $("[name='endereco_cep']").val(result.address.Postal).trigger("change");
- }
- map.setView(e.latlng, 16);
- origin.setLatLng(e.latlng);
- $latlng.val(JSON.stringify(Object.values(e.latlng)));
- });
- }
- }, 100);
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement