Leaflet.js 地图未显示任何图块答案

【问题标题】：Leaflet.js Map not showing any tilesLeaflet.js 地图未显示任何图块
【发布时间】：2018-09-29 10:59:42
【问题描述】：

这是我传单的代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>

  <script type="text/javascript">
  navigator.geolocation.getCurrentPosition(function(location) {
  var latlng = new L.LatLng(location.coords.latitude, location.coords.longitude);
  var map = L.map('map').setView(latlng, 11)
  L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
    subdomains: 'abcd',
    maxZoom: 18
  }).addTo(map);
  map.invalidateSize();
  var marker = L.marker(latlng).addTo(map);
  map.invalidateSize();
  map.on('click', function(e) {
    if (marker != undefined) {
      map.invalidateSize();
      map.removeLayer(marker);
    }
    marker = L.marker(e.latlng).addTo(map);
    var lat = marker.getLatLng().lat;
    var lng = marker.getLatLng().lng;

    var txt = lat.toString() + " , " + lng.toString();
    document.getElementById('cords').value = txt;
    document.getElementById('locationX').value = lat;
    document.getElementById('locationY').value = lng;

  });
  });
  </script>

  <div class="container">
    <div id="map" style="height: 500px;"></div>
  </div>

当我在本地主机中运行此代码时，一切正常。但是当我在我的网站上部署它时，它什么也没显示。我的控制台中没有显示任何错误，也没有地图图块。似乎是什么问题？提前致谢！

【问题讨论】：

什么浏览器和版本？您的网站是否使用 https 提供服务？
不，它不是 https，它是 http。是因为 ssl 吗？ @ghybs
浏览器是 Chrome V69.0 @ghybs

标签： javascript html css dictionary leaflet

【解决方案1】：

Chrome 不再允许在非安全来源（即如果不通过 https 提供服务）上使用地理定位 API，但 localhost 除外。

https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only

【讨论】：

感谢您的回答！ @ghybs