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

Question

这是我的传单的代码：

<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>

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

Answer 1

除本地主机外，Chrome不再允许在非安全来源（即，如果不通过https提供）上的地理位置API。

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