无法使用传单在地图上绘制形状
我正在使用 javascript 库传单来处理地图，我现在做了位置搜索部分，我希望用户可以在地图上绘制圆、线和多边形，但无法正常工作。搜索工具栏可见，但形状不可见。任何人都可以指出我的代码中的错误，在此先感谢。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet"></script>
<!-- Esri Leaflet Geocoder -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css">
<script src="https://unpkg.com/esri-leaflet-geocoder"></script>
<script src="node_modules/leaflet-toolbar/dist/leaflet.toolbar.js"></script>
<link rel="stylesheet" href="node_modules/leaflet-toolbar/dist/leaflet.toolbar.css" />
<link rel="stylesheet" href="node_modules/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.css" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!---- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="../node_modules/leaflet/dist/leaflet-src.js"></script>
<script src="../node_modules/leaflet-toolbar/dist/leaflet.toolbar-src.js"></script>
<script src="../node_modules/leaflet-draw/dist/leaflet.draw-src.js"></script>--!-->
<style>
繁星淼淼1回答
-
慕桂英546537
使用错误var results = L.layerGroup.addTo(map);应该var results = new L.LayerGroup().addTo(map);（就像您在搜索容器中所做的那样）<!DOCTYPE html><html><head> <!-- Load Leaflet from CDN--> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script> <!-- Load Esri Leaflet from CDN --> <script src="https://unpkg.com/esri-leaflet"></script> <!-- Esri Leaflet Geocoder --> <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css"> <script src="https://unpkg.com/esri-leaflet-geocoder"></script> <script src="node_modules/leaflet-toolbar/dist/leaflet.toolbar.js"></script> <link rel="stylesheet" href="node_modules/leaflet-toolbar/dist/leaflet.toolbar.css" /> <link rel="stylesheet" href="node_modules/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.css" /> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!---- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="../node_modules/leaflet/dist/leaflet-src.js"></script> <script src="../node_modules/leaflet-toolbar/dist/leaflet.toolbar-src.js"></script> <script src="../node_modules/leaflet-draw/dist/leaflet.draw-src.js"></script>--!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script> <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script> <style> #map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } </style></head><body> <div id="map"> </div> <script> var center = [-33.8650, 151.2094]; var map = L.map('map').setView([0, 0], 6); drawnItems = new L.FeatureGroup().addTo(map); L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=eL1sdTPWF7XeyxpLvpGq', { attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>' }).addTo(map); var searchContrl = L.esri.Geocoding.geosearch().addTo(map); //adding layergroup to search control console.log(L.LayerGroup); var results = new L.LayerGroup().addTo(map); searchContrl.on('results', function(data) { results.clearLayers(); for (var i = data.results.length - 1; i >= 0; i--) { results.addLayer(L.marker(data.results[i].latlong)); } }); var editableLayers = new L.FeatureGroup(); map.addLayer(editableLayers); var MyCustomMarker = L.Icon.extend({ options: { shadowUrl: null, iconAnchor: new L.Point(12, 12), iconSize: new L.Point(24, 24), iconUrl: 'link/to/image.png' } }); var options = { position: 'topright', draw: { polyline: { shapeOptions: { color: '#f357a1', weight: 10 } }, polygon: { allowIntersection: false, // Restricts shapes to simple polygons drawError: { color: '#e1e100', // Color the shape will turn when intersects message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect }, shapeOptions: { color: '#bada55' } }, circle: false, // Turns off this drawing tool rectangle: { shapeOptions: { clickable: false } }, marker: { icon: new MyCustomMarker() } }, edit: { featureGroup: editableLayers, //REQUIRED!! remove: false } }; var drawControl = new L.Control.Draw(options); map.addControl(drawControl); map.on(L.Draw.Event.CREATED, function(e) { var type = e.layerType, layer = e.layer; if (type === 'marker') { layer.bindPopup('A popup!'); } editableLayers.addLayer(layer); }); </script></body></html>顺便说一句，我使用var了因为你的语法，但const更好let。
随时随地看视频慕课网APP
相关分类
JavaScript