2

我开始掌握 mapbox.js。我有一个 CSV 文件，其中包含我想添加为标记的点。

我的 CSV 文件如下所示：

 event,lat,lon,title,num_people
 arson,47.14,8.01,Company 1,2
 arson,46.68,9.50,Company 2,120
 robbery,46.57,6.62,Company 3,3

我想在地图上为每一行添加一个标记，将其着色为红色或橙色，并根据是纵火还是抢劫添加 Maki 图标，根据受影响的人数调整大小，并在鼠标悬停时添加工具提示与标题。

这是据我所知：

var markerLayer = mapbox.markers.layer();
$.get("/data/crimes.csv", function(data) { 
    var crimes = $.csv.toObjects(data); 
    $.each(crimes, function(i, crime) {
      var newfeature = {
          geometry: { coordinates: [crime.lon,crime.lat] }
      };
      // How to define colour/size/icon here?
      markerLayer.add_feature(newfeature);
      map.addLayer(markerLayer);
    });
  });

它为每个事件添加一个灰色标记。如何根据事件类型设置标记样式，并在鼠标悬停时添加工具提示？

有一些关于 CSV 文件的 mapbox 文档，但它似乎期望 CSV 文件作为一个字符串并采用非常特殊的格式，并具有颜色/大小/图标的预定义设置。

如果可能的话，我宁愿使用数据对象并定义我自己的交互，因为我想用数据做其他事情。

更新：我已经想出了如何添加工具提示，所以现在只需要制定标记样式：

  var markerLayer = mapbox.markers.layer();
  var interaction = mapbox.markers.interaction(markerLayer);
  interaction.formatter(function(feature) {
    console.log(feature);
      var o = '<strong>' + feature.properties.title + '</strong>';
      return o;
  });
  $.get("/data/crimes.csv", function(data) { 
    var crimes = $.csv.toObjects(data); 
    $.each(crimes, function(i, crime) {
      var newfeature = {
          geometry: { coordinates: [crime.lon,crime.lat] },
          properties:  {
            title: crime.title
          }
      };
      markerLayer.add_feature(newfeature);
      map.addLayer(markerLayer);
    });
  });
4

1 回答 1

2

此示例http://mapbox.com/mapbox.js/example/single-marker/演示了一种以预期语法请求自定义标记的方法。

于 2013-02-25T14:15:30.650 回答