这是我的传单的代码:
<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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <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>
当我在本地主机上运行此代码时,一切正常。但是,当我在网站上部署它时,它什么也没有显示。 我的控制台中没有错误,也没有地图图块。 似乎是什么问题? 预先感谢!
答案 0 :(得分:0)
除本地主机外,Chrome不再允许在非安全来源(即,如果未通过https服务)上的地理位置API。
https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only