我正在寻找一种使用 AJAX 在传单中使用 JSON 而不是 GeoJSON 的方法。需要使用 JSON 和 AJAX。
\n\n我设法使用 AJAX 调用 JSON 文件。但是，现在我很困惑如何使用 JSON 中的数据在地图上绘制标记。我猜我不能使用 L.geoJson()。
\n\nHTML：
\n\n<div id="map" style="width: 800px; height: 500px"></div>\n这是 JavaScript 文件：
\n\nvar map;\nvar overlay;\n\nvar addPopupsFromLocations = function(locations) {\n var popups = new Array();\n locations.forEach(function(location){\n console.log(\'creating popup for location \' + location.title);\n\n console.log(location.latitude);\n console.log(location.longitude);\n }) ;\n};\n\nfunction init() {\n var map = L.map(\'map\').setView([51.505, -0.09], 13);\n\n L.tileLayer(\'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png\', {\n maxZoom: 18,\n attribution: \'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, \' +\n \'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, …ImageOverlay我正在尝试制作地图上添加和删除的动画。基本上，TileLayer有这个getContainer()功能可以检索与图层相对应的 html 元素。然后我可以调用 afadeIn()或fadeOut()函数来为其设置动画，如下所示：
$(tileLayer.getContainer()).fadeOut(5000, function(){
map.removeLayer(tileLayer);
});
我想用 my 重现相同的行为ImageOverlay，但没有可以获取图像元素的函数（传单文档）。有什么办法可以做到这一点吗？
我知道这个问题之前已经被问过并回答过，但我无法成功地实现这些示例。
我试图通过加载地图zoomedIn()（工作正常），然后按按钮加载地图zoomedOut()
然而zoomedOut()，我正在Map container is already initialized追赶var map = new L.Map('map');
我原以为前一行if (map != undefined) { map.remove(); }会解决这个问题。
发生了什么事 - 我怎样才能重绘地图？
<body onLoad="javascript:zoomedIn();">
<form method = "post">
<button type="button" onclick="return zoomedOut()">Zoom Out</button>
<div id="map"</div>
</form>
<script language="javascript">
function zoomedIn() {
var map = new L.Map('map');
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
id: 'mapbox.streets'
}).addTo(map);
var devon = new L.LatLng(50.900958,-3.370846);
map.setView(devon, 7);
}
</script>
<script language="javascript">
function zoomedOut() {
if (map != undefined) { map.remove(); …我正在尝试向 Asymmetrik/ngx-leaflet 创建的地图添加图例。该地图是按照https://github.com/Asymmetrik/ngx-leaflet中的教程创建的 。有两个不同的层，每个层应该有不同的图例。该代码是使用 Angular CLI 和 leaflet 编写的。有一个地图组件。map.component.ts文件如下：
import {Component, Input, OnChanges, OnInit} from '@angular/core';
import {circle, geoJSON, GeoJSONOptions, latLng, Layer, LeafletMouseEvent, polygon, tileLayer} from 'leaflet';
import * as L from 'leaflet';
import {SimpleResult} from '../../models/SimpleResult';
import {HttpClient} from '@angular/common/http';
import {IDrilldownResult} from '../../models/DrilldownResult';
@Component({
selector: 'app-map-chart',
templateUrl: './map-chart.component.html',
styleUrls: ['./map-chart.component.css']
})
export class MapChartComponent implements OnInit, OnChanges {
@Input() private data: IDrilldownResult;
public options: any;
public layersControl = {
baseLayers: { }
};
private getColor(value, max, …我知道有一种方法可以禁用 \xe2\x80\x9cdelete\xe2\x80\x9d 按钮leaflet-draw\'s edit toolbar.
我想知道是否有补充设置，即：禁用编辑按钮但保持删除按钮处于活动状态 button (the one with the trash bin icon).
\n\n此外，我想知道是否有一种简单的方法来自定义“删除”按钮选项。我需要禁用单击删除图标后看到的“保存”选项。
\n我尝试使用此插件https://github.com/tcoupin/leaflet-paintpolygon进行多点圆形图像注释。但由于其中使用的库中存在错误，该插件无法正常工作。在传单或其他 JS 库中是否有其他解决方案可以做到这一点？谢谢
是否可以使用 Leaflet 检查一个点是否在视口内？
我有center视口和zoom水平仪。是否可以计算仅具有这些值的边界？
我有我的组件 MAP 并且使用传单（不是反应传单）。我想设置一个标记。
这是我的组件的代码。
import React from 'react';
import L from 'leaflet';
import '../../../../node_modules/leaflet/dist/leaflet.css';
import './map.scss';
export default class Map extends React.Component {
componentDidMount() {
this.map = L.map('map', {
center: [48.8762, 2.357909999999947],
zoom: 14,
zoomControl: true,
layers: [
L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',{
detectRetina: true,
maxZoom: 20,
maxNativeZoom: 17,
}),
]
});
L.marker([48.8762, 2.357909999999947],
{
draggable: true, // Make the icon dragable
title: 'Hover Text', // Add a title
opacity: 0.5} // Adjust the opacity
)
.addTo(this.map)
.bindPopup("<b>Paris</b><br>Gare de l'Est")
.openPopup();
L.circle([48.8762, 2.357909999999947], { …我想用Leaflet我想与 NextJS(typescript) 一起
但Leaflet不支持SSR。所以，我用react-leaflet-univarsal.
然后，我自定义了Leaflet的Marker组件。所以，我想用Leaflet.Icon. 我尝试了两件事。
if(process.browser){}这是没有找到的window。
next/dynamiclet iconPerson: any;
const DynamicComponent = dynamic(
() =>
import('leaflet').then(L => {
iconPerson = (L as any).Icon.extend({
options: {
iconUrl: '/images/icon1.jpg',
iconRetinaUrl: '/images/icon1.jpg',
iconSize: new (L as any).Point(60, 75),
className: 'leaflet-div-icon',
},
});
}) as any,
{ ssr: false },
);
....
<Marker icon={iconPerson}>
这是打印出来的。> 无法读取未定义的属性“createIcon”
L.icon是和NextJS一起使用的方式吗？
我有一张带有不同标记的地图，我需要将其删除并向其他人显示。为了这个目标，我正在使用clearLayers()（我的脚本基于使用这个问题的答案）。
下面我添加我的代码。我想做的是知道我的地图中是否有标记，如果答案是肯定的，则删除它并显示新的标记。但layerGroup总是undefined……怎么删除呢？我做得正确吗layerGroup？
function markersMap(coords){
// Delete previous markers
if (layerGroup === undefined) {
console.log('layerGroup undefined');
} else{
console.log('layerGroup defined');
layerGroup.clearLayers();
}
// markers
var layerGroup = L.layerGroup().addTo(map);
var marker = "L.marker(coo,{icon: iconMarker}).bindPopup(popUp).addTo(layerGroup);";
for (var i = 0; i < coords.length; i++) {
popUp = String(coords[i][0]);
coo = [coords[i][1],coords[i][2]];
if (coords[i][3] <= 3) {
var colorMarker = "red.png";
} else if (coords[i][3] == 4) {
var colorMarker = "orange.png";
} else …leaflet ×10
javascript ×7
reactjs ×2
typescript ×2
ajax ×1
angular ×1
jquery ×1
json ×1
leaflet.draw ×1
maps ×1
next.js ×1
ngx-leaflet ×1
paint ×1