代码之家 › 专栏 › 技术社区 › tonymx227

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

leaflet javascript

tonymx227 · 技术社区 · 6 年前

我想用传单,但我的地图上似乎没有标记和圆圈。

我的地图在文件上很好,但标记和圆圈都被隐藏了。

我的代码:

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

按要求装载:

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

1 回复 | 直到 6 年前

Kosh 6 年前

问题是你试图定义 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>

推荐文章

Krubkj lkjlökg · UTMREF/MGRS传单中的地图网格

1 年前

Kiki · TypeError:无法读取null的属性(读取“\u传单\u禁用\u单击”)

3 年前

Murali · 如何将Rshiny select输入带到前一层?目前传单图例阻碍了选择

7 年前

user5405873 · 如何缩放距离标记15km半径内的区域

7 年前

Stefan · 实际需要时,单击即可填写传单弹出窗口

7 年前

Marc Coll · 如何使用sliderInput值选择列并使用它更改映射R?

7 年前

val · 在Shiny中应用传单贴图边界过滤数据

7 年前

edaus · L.GridLayer上的传单JS setOpacity

7 年前

Cezar B · 用于扩展信息框的传单事件侦听器

7 年前

wuk986 · 传单:刷新不带缓存的tilelayer

7 年前