Question

我想使用Leaflet，但是标记和圆圈似乎无法在我的地图上显示。

我的地图在文档上很好，但是标记和圆圈被隐藏了。

我的代码：

var map = L.map(document.querySelector('#map')).setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'MYMAP',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'MYTOKEN'
}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);

var circle = L.circle([51.508, -0.11], {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: 500
}).addTo(map);

使用RequireJS加载：

define('Composite-Map', ['leaflet'], function() { /*my code*/ })

Answer 1

问题是您试图将leaflet定义为模块。但这不是一个模块。使用require代替define，它将起作用：

require(['https://unpkg.com/leaflet@1.3.4/dist/leaflet.js'], function() {
  var map = L.map(document.querySelector('#map')).setView([51.505, -0.09], 13);
console.log(0);
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    attribution: 'MYMAP',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'MYTOKEN'
  }).addTo(map);

  var marker = L.marker([51.5, -0.09]).addTo(map);

  var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
  }).addTo(map);
})

#map {height:100vh}

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"/>

<div id="map"></div>

标记或圆圈在传单上不起作用

1 个答案: