mapbox中的图标url

Question

如何在mapbox中添加自定义图标?

var map = L.mapbox.map('map', 'mapbox.streets').setView([0, 0], 1);
  var geojson = { type: 'LineString', coordinates: value};
  var start = value[0];
  var end = value[value.length-1];
  geojson.coordinates.push((start,end).slice());
  // Add this generated geojson object to the map.
  L.geoJson(geojson).addTo(map);
  // Create a marker and add it to the map.
  var marker = L.marker(end, {        
    icon: L.mapbox.marker.icon({
      "iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png"
    })
  }).addTo(map);
});

我不能在上面的代码中添加自定义图标。请帮帮我……
谢谢。

Answer 1

首先你必须创建一个var，例如'myIcon'，然后简单地将iconUrl替换为指定你想要使用的自定义标记的路径。

你可以使用iconSize选项来指定你的标记的大小你可以使用iconAnchor选项来指定遮罩的哪个部分应该放在页面上。

myIcon=L.icon({
    iconUrl:'img/custom-marker.png',
    iconSize: [25,30]
});

然后创建标记，设置您想要放置标记的位置。并指定要使用的图标。

var Marker = new L.Marker ( latlng, {icon:myIcon});

最后把你的市场添加到地图上:

map.addlayer(标志);