如何自定义传单地图以禁用移动设备上的单指滚动并添加两个手指滚动,如谷歌地图(请参阅https://developers.google.com/maps/documentation/javascript/interaction)
我觉得像手指上的听众,手指向上和自定义叠加或某事.这样应该有所帮助.但是如何正确地将其整合为传单中的插件?
<html>
<head>
<link href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid', {center: [48,9], zoom:8, layers: [L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')]});
</script>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
我正在实例化一个传单地图,但是这些图块基本上遍布整个页面 - 而地图在一个div内,大多数图块都不尊重该边界:
<div class="widget-content listing-search-map-widget-content">
<div class="ih-map"
id="Map_5333811_16"
style="height:450px;"
data-centerpoint="38.573955 -121.442478"
data-mousewheel="true"
data-maptype="TERRAIN"
data-zoom="8"
>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
javascript归结为:
mapOptions = {
attributionControl: true,
center: {
lat: 38.573955
lng: -121.442478
},
centerpoint: "38.573955,-121.442478",
layers: {},
maptype: "Terrain",
scrollWheelZoom: false,
zoom: 8
}
var map = L.map( "Map_5333811_16", mapOptions );
Run Code Online (Sandbox Code Playgroud)
什么会导致瓷砖遍布整个地方?一些瓷砖在div的范围内,但不是其余的.你可以看到这里发生的事情的截图:

我使用survivaljs.com 站点作为模板,使用webpack 构建基于地图的React 应用程序。对于地图,我使用的是传单,但我找不到添加传单.css 的方法。如果没有这个,地图图块将以错误的顺序显示。
我已经尝试使用这个将 Leaflet.css 添加到 App.jsx 文件中
require('leaflet/dist/leaflet.css');
Run Code Online (Sandbox Code Playgroud)
但得到以下错误
ERROR in ./~/leaflet/dist/leaflet.css
Module parse failed: myApp/node_modules/leaflet/dist/leaflet.css Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
Run Code Online (Sandbox Code Playgroud)
如果我可以访问 index.html,我可以将它添加到那里,但是我使用 webpack,我不清楚该怎么做?
首先感谢您的帮助。
我正在用 Django 创建一个表单,它使用 OSMWidget 将坐标(多边形、线和点)保存到 PostgreSQL 数据库中的几何字段。它运行良好,我可以毫无问题地将信息保存在数据库中。当我使用 PgAdmin 进行查询时,我可以正确地看到 Leaflet 地图中显示的几何字段数据。
.
以下是我在 forms.py 中的一些内容:
from django import forms
from django_select2 import forms as select2_forms
from django.contrib.gis import forms as osmforms
from django.forms import ModelForm
from .models import Dataset
class SessionForm(forms.ModelForm):
at_choices = [(item.title, item.title) for item in Dataset.objects.all()]
key_choices = [(item.keywords_d, item.keywords_d) for item in Dataset.objects.all()]
uuid = forms.CharField(label='', max_length=10 , widget=forms.TextInput(attrs={'class': "form-control left-half"}))
title = forms.CharField(label='Title', max_length=65536 , widget=forms.TextInput(attrs={'class': "form-control full-size-field"}))
abstract = forms.CharField(label='Abstract', max_length=65536 , widget=forms.Textarea(attrs={'class': …Run Code Online (Sandbox Code Playgroud) 在Leaflet的例子中(对于非地理图像),他们设置了“边界”。我试图了解他们如何计算值
var bounds = [[-26.5,-25], [1021.5,1023]];
Run Code Online (Sandbox Code Playgroud)
原点在左下角,y 向上/x 向右增加。负数是怎么出现在这里的?此外,经过实验,我发现如果为边界指定不同的坐标,实际像素坐标会发生变化。我有一个我想使用的自定义 png 地图,但由于这个原因我无法继续。
我正在调试WebGL应用程序,在调用compileShader()和之后,我的控制台中会弹出以下错误消息getShaderInfoLog():
GL_INVALID_OPERATION : glGenSyncTokenCHROMIUM: fence sync must be flushed before generating sync token
Run Code Online (Sandbox Code Playgroud)
我搜索德interwebs了glGenSyncTokenCHROMIUM,没有用.
(这个错误似乎是特定于硬件的,因为我只能重现它在GT-I9505运行Chrome时)
这个错误意味着什么,和/或如何获得有关正在发生的事情的更详细信息?
因此github最近实现了一项功能,以使用而不是docs/目录mastergh-pages。这对于某些用例(例如我的)很有用。
该场景是一个带有a master和gh-pages分支的git repo (做“ github页面”的“旧”方式),我想将gh-pages分支中的所有内容都移到该docs/目录中master(做“ github页面的“新”方式)。
我知道我可以使用git checkout master; git checkout gh-pages -- docs,但这会从gh-pages文件中删除历史记录,这是不希望的。
我在git subtree和之间摆弄git filter-branch,没有成功。
因此,问题是:是否有一条神奇的单线git命令将另一分支的内容移至子目录,同时保留历史记录?
我需要检查a中的内容<canvas>,就像这个问题一样.我知道如何使用Chrome开发工具画布检查器和Firefox Canvas调试器.
Safari Web浏览器是否有类似的工具?
为清楚起见,我们假设桌面Safari v9.1.1在OSX 10.10中运行.
我试图在我的反应网站上显示示例地图。我已经安装了传单包和反应传单包,然后按照反应传单文档所述进行所有设置。您可以在下面查看我的代码,以获取有关我如何设置它的参考。
<div>
<h3 className='text-4xl my-4 text-center text-slate-800 font-bold'>Maps and Direction</h3>
<div className='mx-auto py-2' style={{ width: "80%", height: "100%" }}>
<MapContainer center={position} zoom={13} scrollWheelZoom={true}>
<TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker position={position}>
<Popup>
Website Name
</Popup>
</Marker>
</MapContainer>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我还在我的index.html中导入了传单CSS CDN,如下所示,
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
Run Code Online (Sandbox Code Playgroud)
我还设置了地图容器的定义高度和宽度,正如您在我的代码中看到的那样。但它显示了地图的一些分散部分,如下图所示。
。
请任何人帮助我解决可能出现的问题或者我是否缺少任何说明。
leaflet ×7
javascript ×3
maps ×2
reactjs ×2
coordinates ×1
css ×1
django ×1
geodjango ×1
git ×1
github ×1
github-pages ×1
html5-canvas ×1
interaction ×1
python ×1
safari ×1
touch ×1
webgl ×1
webpack ×1