GeoJson/Mapbox标记:允许用户通过按钮[EDITED]更改其属性(例如颜色) [英] GeoJson/Mapbox markers: let users change their attributes (e.g. color) via a button [EDITED]

问题描述

(我不满意，因为不小心将问题用未完成的名称发布，请不要吓退)

(I received some thumbs down because accidentally posted the question with an unfinished name, please don't be deterred)

如 https: //www.mapbox.com/mapbox.js/example/v1.0.0/change-marker-color-click/我试图让用户更改标记的属性(在此示例中为颜色).

As in the example of https://www.mapbox.com/mapbox.js/example/v1.0.0/change-marker-color-click/ I'm trying to let the user change attributes (in this example the color) of markers.

在此Mapbox示例中，当用户单击标记时，标记的属性会更改.但是，当用户单击html中的div(按钮)之一时，我想更改标记的属性.因此，当用户单击Button1时，标记1的颜色应更改，而当用户单击Button2时，标记2的颜色应更改.

In this example of Mapbox the attribute of a marker is changed when the user clicks on the marker. However, I would like to change the attribute of markers when the user clicks on one of the divs (buttons) in the html instead. So when the user clicks on Button1 the color of Marker 1 should change and when the user clicks on Button2 the color of Marker 2 should change.

您可以在此处找到我的测试html: http://weareguide.com/test.html

You can find my test html here: http://weareguide.com/test.html

非常感谢您的帮助.

<!--I would like these buttons to do the job-->
<div class='buttons'>
    <div id='Button1' onclick='AddToSelection(1)'>Change color Marker 1</div> <!--call a function that changes Marker 1-->
    <div id='Button2' onclick='AddToSelection(2)'>Change color Marker 2</div> <!--call a function that changes Marker 2-->
</div>

<div id='map'></div>

<script>
var map = L.mapbox.map('map', 'njit.map-cval12af');

var geoJson = [
    {type:'Feature',geometry:{type:'Point',coordinates:[174.7665232,-36.853447]},properties:{title:"Marker 1",'marker-color':'#4c96ce','marker-size':'small'}},
    {type:'Feature',geometry:{type:'Point',coordinates:[174.7774598,-41.29007064]},properties:{title:"Marker 2",'marker-color':'#4c96ce','marker-size':'small'}}
];

map.markerLayer.setGeoJSON(geoJson);

//This is the current function used in the Mapbox example, I want to replace this with the new function
map.markerLayer.on('click',function(e) {
    e.layer.feature.properties['marker-color'] = '#000000';
    map.markerLayer.setGeoJSON(geoJson);
});
</script>

推荐答案

像这样使用.这是可行的示例.

Use like this.. This is working example.

<div class='buttons' style="z-index: 100; position: absolute;">
    <input type="button" onclick='AddToSelection(1)' value="Change color Marker 1" /><!--call a function that changes Marker 1-->
    <input type="button" onclick='AddToSelection(2)' value="Change color Marker 2" /> <!--call a function that changes Marker 2-->
</div>

<div id='map'></div>

<script>
  var map = L.mapbox.map('map', 'njit.map-cval12af');

  var geoJson = [
   {type:'Feature',geometry:{type:'Point',coordinates:[174.7665232,-36.853447]},properties:{title:"Marker 1",'marker-color':'#4c96ce','marker-size':'small'}},
   {type:'Feature',geometry:{type:'Point',coordinates:[174.7774598,-41.29007064]},properties:{title:"Marker 2",'marker-color':'#4c96ce','marker-size':'small'}}
  ];

  map.markerLayer.setGeoJSON(geoJson);

  function AddToSelection(mydata) {
      map.markerLayer.eachLayer(function(marker) {
          var feature = marker.feature;
          if(feature.properties['title'] == 'Marker '+mydata) {
              feature.properties['marker-color'] = '#000000';
              map.markerLayer.setGeoJSON(geoJson);
          }
      }
  }      
</script>

这篇关于GeoJson/Mapbox标记:允许用户通过按钮[EDITED]更改其属性(例如颜色)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！