首页猿问无法使用传单在地图上绘制形状

无法使用传单在地图上绘制形状

JavaScript

繁星淼淼 2022-11-03 15:20:12

我正在使用 javascript 库传单来处理地图，我现在做了位置搜索部分，我希望用户可以在地图上绘制圆、线和多边形，但无法正常工作。搜索工具栏可见，但形状不可见。任何人都可以指出我的代码中的错误，在此先感谢。这是我的代码：<!DOCTYPE html><html><head>  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>  <script src="https://unpkg.com/esri-leaflet"></script>  <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>  <style>

查看完整描述

1 回答

慕桂英546537

TA贡献1848条经验获得超10个赞

使用错误

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

应该

var results = new L.LayerGroup().addTo(map);

（就像您在搜索容器中所做的那样）

<!DOCTYPE html>

<html>

<head>

<!---- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style>

#map {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

</style>

</head>

<body>

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。

反对回复 2022-11-03

1 回答
0 关注
145 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

无法使用传单在地图上绘制形状

无法使用传单在地图上绘制形状

1 回答

添加回答