使用Mapbox一起添加自定义图标和标记数据 [英] Adding custom icon and marker data together using Mapbox

问题描述

我是mapbox的新手，我有一个简单的问题。我制作了一个要素图层和一个自定义图标列表。我如何将两者加在一起？

我的要素图层格式如下：

  L.mapbox.featureLayer（{
type：Feature，
geometry：{
coordinates：[
'。$ long '，'。$ lat''
]，
type：Point
}，
properties：{
title： '。$ business_name。'，
description：'。$ address_1。'，'。$ address_2。'，'。$ address_3。'，'。$ postcode。'
} 
}）。addTo（map）; 
  

我的自定义标记的示例如下

  var accomodation = L.icon（{
 iconUrl：'/img/pins/day-and-night/accommodation.png'，
 iconSize：[46 ，62]，
 iconAnchor：[8，60]，
}）; 
  

任何帮助都是完美的。

谢谢

解决方案

在你的代码中，我假设你在谈论mapbox.js，它是leaflet.js的衍生物。 p>

如果是这样，我认为你要找的是传单层组

所以，在你的情况下...

 < 
geometry：{
coordinates：[
' 。$ long。'，'。$ lat。'
]，
type：Point
}，
properties：{
title ：'。$ business_name。'，
description：'。$ address_1。'，'。$ address_2。'，'。$ address_3。'，'。$ postcode。'
} 
}）; 
 
 var accomodation = L.icon（{
 iconUrl：'/img/pins/day-and-night/accommodation.png'，
 iconSize：[46，62] ，
 iconAnchor：[8，60]，
}）; 
 
 var layergroup = L.layerGroup（[featureLayer，accomodation]）; 
 
 layergroup.addTo（map）; 
  

I am new to mapbox and I have a simple question. I have made a feature layer and a list of custom icons. How do I add the two together?

My feature layer is formatted as below:

L.mapbox.featureLayer({
     "type": "Feature",
     "geometry": {
     "coordinates": [
     '.$long.','.$lat.'
     ],
     "type": "Point"
     },
     "properties": {
     "title": "'.$business_name.'",
     "description": "'.$address_1.', '.$address_2.', '.$address_3 .', '.$postcode .'"
     }
     }).addTo(map);

And example of my custom marker is below

var accomodation = L.icon({
    iconUrl: '/img/pins/day-and-night/accommodation.png',
    iconSize: [46, 62],
    iconAnchor: [8, 60],
    });

Any help would be perfect.

Thanks

解决方案

From your code, I assume you are talking about mapbox.js, which is a derivative of leaflet.js

If so, I think what you are looking for is leaflet layer groups

So, in your case...

var featureLayer = L.mapbox.featureLayer({
   "type": "Feature",
   "geometry": {
   "coordinates": [
      '.$long.','.$lat.'
   ],
   "type": "Point"
   },
   "properties": {
      "title": "'.$business_name.'",
      "description": "'.$address_1.', '.$address_2.', '.$address_3 .', '.$postcode .'"
   }
   });

var accomodation = L.icon({
   iconUrl: '/img/pins/day-and-night/accommodation.png',
   iconSize: [46, 62],
   iconAnchor: [8, 60],
});

var layergroup = L.layerGroup([featureLayer, accomodation]);

layergroup.addTo(map);

这篇关于使用Mapbox一起添加自定义图标和标记数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！