从视图源复制的传单地图代码:不起作用 [英] Leaflet Map code copied from View-source: not working

问题描述

我试图基于此使用现成的Leaflet Map示例:

I was trying to use a ready Leaflet Map example, based here:

http://www.gistechsolutions.com/leaflet/DEMO/Select /SelectPoints3.html

它将鼠标悬停在地图上150英里范围内的所有点. 如您所见，网站上的链接非常有效.不像我的本地文件.

It hovers all points within 150 miles from the mouse click on the map. As you can see the link on the website works perfectly. unlike to my local file.

我将本示例中的整个代码复制到了本地文件中，并将其另存为.html代码. 所有javascript文件都已被故意复制(但是，它们显示为链接，因此没有必要将它们复制到我的硬盘驱动器上.

I copied a whole code from this example into my local file and save it as a .html code. All javascript files has been deliberately copied (however, they appear as a links, so it wasn't necessary to copy them onto my hard drive.

我必须复制的一个文件是BaseBallFinal.json，其中包括提供的所有地标的数据.

One file, that I had to copy was BaseBallFinal.json, including the data of all placemarks provided.

我真的很困惑，因为文件扩展名.html意味着那里没有php代码，因此所有内容都应该轻松转移.不幸的是，一旦单击某处，我会有一个空白地图，带有清晰的标记. 相反，上面链接下提供的地图提供了我所需要的一切.

I am really confused, because the file extension .html means, that there is no php code there, so everything should be transferred easily. Unfortunately I have a blank map with clear marker once click somewhere. On the contrary the map provided under the link above features everything what I need.

您能解释一下，此操作有什么问题吗?为何 var url ="BaseBallFinal.json";根本不工作吗?

Could you explain me, what is wrong in this operation? Why the var url = "BaseBallFinal.json"; is not working at all?

这部分代码似乎影响后面的部分，不可用且不可见.

It looks like this part of the code affect a latter sections, being unavailable and invisible.

推荐答案

通过控制台网络复制粘贴JSON之后，您根本不需要使用jquery.只需像这样导入GEOJSON:

After copy pasting the JSON via console's network you do not need to use jquery at all. Just import the GEOJSON like this:

import json from "./BaseBallFinal.json";

并使用此代码

sites = L.geoJson(json, {
  pointToLayer: function(feature, latlng) {
    return L.circleMarker(latlng, {
      radius: 4, //expressed in pixels circle size
      color: "red",
      stroke: true,
      weight: 7, //outline width  increased width to look like a filled circle.
      fillOpcaity: 1
    });
  }
});

代替

var promise = $.getJSON(url);
    promise.then(function(data) {

        sites = L.geoJson(data, {

            pointToLayer: function(feature, latlng) {
                return L.circleMarker(latlng, {
                radius: 4, //expressed in pixels circle size
                color: "red", 
                stroke: true,
                weight: 7,      //outline width  increased width to look like a filled circle.
                fillOpcaity: 1
                });
                }
        });
   ...
}

其余代码几乎相同.我用过es6. 请注意，我已在本地下载并对其进行了测试，它可以按预期运行.

The rest of code remains pretty much the same. I used es6. Just for your notice I downloaded and tested it locally and it works as expected.

演示

这篇关于从视图源复制的传单地图代码:不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！