个人中心
gpt4 book ai didi

javascript - 将时间 slider 与传单合并

转载 作者：行者123 更新时间：2023-12-03 07:14:20 27 4
gpt4 key购买 nike

我对使用传单和 JavaScript 很陌生。我正在尝试使用传单实现时间 slider 。我看过了

1) https://github.com/dwilhelm89/LeafletSlider ,

2) https://gis.stackexchange.com/questions/120331/jsonp-working-with-leaflet-time-slider和

3) TimeSlider Plugin and Leaflet - Markers not appearing in order

但我仍然遇到麻烦。我的 HTML 文件如下所示:

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">

  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
  <script type="text/javascript" src="C:\Users\Lukasz Obara\OneDrive\Programing\JavaScript\Leaflet\Plugins\SliderControl.js"></script>
</head>

<body>
    <meta charset="utf-8">
    <title>Slider</title>
    <style> html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #map {
      height: 100%;
    }
    </style>
</body> 

<div id="map"></div>
<script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\slider.geojson'></script>
<script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\leaflet_demo_slider.js'></script>

我的 slider.geojson 文件:

var slider = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.1966, 31.7825]
        },
        "properties": {
            "GPSId": "2",
            "DateStart": "2015-06-23",
            "DateClosed": "2016-01-23",
            "GPSUserName": "fake2",
            "GPSUserColor": "#FF5500",
            "Gender": "Male",
            "Active": 1
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.2, 31.780117]
        },
        "properties": {
            "GPSId": "6",
            "DateStart": "2015-06-23",
            "DateClosed": "2016-01-23",
            "GPSUserName": "fake1",
            "GPSUserColor": "#00FF57",
            "Gender": "Female",
            "Active": 0
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.201715, 31.779548]
        },
        "properties": {
            "GPSId": "15",
            "DateStart": "2015-02-21",
            "DateClosed": "2016-02-28",
            "GPSUserName": "fake10",
            "GPSUserColor": "#00FF57",
            "Gender": "Male",
            "Active": 1
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.200987, 31.779606]
        },
        "properties": {
            "GPSId": "16",
            "DateStart": "2015-01-01",
            "DateClosed": "2016-01-01",
            "GPSUserName": "fake11",
            "GPSUserColor": "#00FF57",
            "Gender": "Female",
            "Active": 0
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.200987, 31.780522]
        },
        "properties": {
            "GPSId": "17",
            "DateStart": "2015-02-04",
            "DateClosed": "2016-09-21",
            "GPSUserName": "fake12",
            "GPSUserColor": "#00FF57",
            "Gender": "Male",
            "Active": 1
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.201435, 31.780981]
        }
    }],
};

和我的 javascript leaflet_demo_slider.js 文件 

var map = L.map('map', {
    center: [31.780117, 35.2],
    zoom: 17,
    minZoom: 2,
    maxZoom: 20
});

L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
    subdomains: ['otile1','otile2','otile3','otile4']
}).addTo(map);

var sliderControl = null;

//Create a marker layer (in the example done via a GeoJSON FeatureCollection)
var testlayer = L.geoJson(slider, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1>" + feature.properties.GPSUserName + "</h1><p>Other info</p>");
    }
});

var sliderControl = L.control.sliderControl({
    position: "topright",
    layer: testlayer,
    range: true,
    timeAttribute: "DateStart"
});

//Make sure to add the slider to the map ;-)
map.addControl(sliderControl);

//And initialize the slider
sliderControl.startSlider();

如果我删除 javascript 文件中的所有 slider 选项，只需

L.geoJson(slider, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1>" + feature.properties.GPSUserName + "</h1><p>Other info</p>");
    }
})addTo(map);

然后我就可以看到标记，但用我所拥有的，我只能生成 map 。

最佳答案

问题似乎是您的最后一个 GeoJSON 功能，它没有 DateStart 属性(对于 slider )或 GPSUserName 属性(对于弹出窗口)。如果您删除该功能，它将起作用:

http://jsfiddle.net/ngeLm8c0/6/

如果您查看记录错误的控制台输出，这些问题通常更容易诊断。在大多数浏览器中，您可以通过按 F12 访问控制台(和其他开发人员工具)。当然，仅仅从错误消息中并不总是清楚出了什么问题，但即使您不理解所收到的错误，在此处包含错误消息和您的问题也会很有帮助，以便其他人可以更多地了解问题所在。轻松诊断您的问题。

关于javascript - 将时间 slider 与传单合并，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36492679/

27 4 0
文章推荐： javascript - 如何使用 jquery/javascript 将值插入到 javascript 对象中
文章推荐： javascript - LocalStorage 上的 Angularjs 性能
文章推荐： javascript - Cookie 显示在回调 url 中，但不显示在浏览器 cookie 存储中
文章推荐： javascript - jQuery 用户界面 : How to add ID to combobox
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com