L.esri никак не определен в vue.js - PullRequest
Новая
       52

L.esri никак не определен в vue.js

0 голосов
/ 05 октября 2019

Я использую буклет и esri в одном html-файле для поиска мест, он работает нормально, но когда я склонен добавлять этот код в проект vue.js, он приходит к L.esri, который всегда неопределен в любых методах: 

var L = require("leaflet");
var esri = require("esri-leaflet");

приведенный выше код не работает в vue.js, даже если я пытаюсь загрузить файлы сценария локально, не работает.

Пример файла, который работает нормально: 

<!DOCTYPE html>
<html>
  <head>
    <title>Esri Leaflet Geocoder</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <!-- Load Leaflet from their CDN -->
    <link rel="stylesheet" href="./leaflet.css" />
    <script src="./leaflet-src.js"></script>

    <script src="./esri-leaflet-debug.js"></script>

 <!-- Esri Leaflet Geocoder -->
    <link rel="stylesheet" href="./esri-leaflet-geocoder.css">
    <script src="./esri-leaflet-geocoder-debug.js"></script>

    <!-- Make the map fill the entire page -->
    <style>
      #map {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      var map = L.map('map').setView([37.74, -121.62], 9);
      var marker = L.marker([37.74, -121.62],{
        draggable: true
      }).addTo(map);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      // create the geocoding control and add it to the map
    var searchControl = L.esri.Geocoding.geosearch().addTo(map);

    // create an empty layer group to store the results and add it to the map
    var results = L.layerGroup().addTo(map);

    // listen for the results event and add every result to the map
    searchControl.on("results", function(data) {
        results.clearLayers();
        for (var i = data.results.length - 1; i >= 0; i--) {
            results.addLayer(L.marker(data.results[i].latlng));
        }
    });

      var results = L.layerGroup().addTo(map);

      searchControl.on('results', function(data){
        results.clearLayers();
        for (var i = data.results.length - 1; i >= 0; i--) {
          var marker = L.marker(data.results[i].latlng,{
            draggable: true
          });
          results.addLayer(marker);
          marker.on('dragend', function (e) {
              console.log(marker.getLatLng().lat);
              console.log(marker.getLatLng().lng);
          });
        }
      });

      marker.on('dragend', function (e) {
              console.log(marker.getLatLng().lat);
              console.log(marker.getLatLng().lng);
          });

    </script>
  </body>
</html>
...