javascript - Mapbox 搜索，打开弹出窗口/工具提示并更改自定义标记图像

Question

我有一个带有自定义标记图像和搜索字段的 mapbox map - 当搜索字符串和标记的 feature.properties 完全匹配时 - map 放大到匹配标记的坐标 - 在这种情况下我未能实现两件事:

1. 匹配标记的弹出窗口/工具提示显示为打开；和
2. 更改匹配标记的自定义图像。

在此先感谢您的帮助!

代码如下:

L.mapbox.accessToken = 'pk.eyJ1IjoibmFkaiIsImEiOiJjaW43a2hyOXYwMDJrd29semd6bmZha2JuIn0.nE1hjNjGG2rlxm_oMrysyg';
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([38.13455657705411, -94.5703125], 4);

var myLayer = L.mapbox.featureLayer().addTo(map);

var geojson = {
  type: 'FeatureCollection',
  features: [{
      type: 'Feature',
      properties: {
        id: 1,
        'title': 'Washington, D.C.',
        "cityName": "washington",
        "icon": {
          "iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png",
          "iconSize": [50, 50],
          "iconAnchor": [25, 25],
          "popupAnchor": [0, -25],
          "className": "dot"
        }
      },
      geometry: {
        type: 'Point',
        coordinates: [-77.03201, 38.90065]
      }
    }, {
      type: 'Feature',
      properties: {
        id: 2,
        'title': 'Chicago, M',
        "cityName": "chicago",
        "icon": {
          "iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png",
          "iconSize": [50, 50],
          "iconAnchor": [25, 25],
          "popupAnchor": [0, -25],
          "className": "dot"
        }
      },
      geometry: {
        type: 'Point',
        coordinates: [-87.71484375, 41.80407814427234]
      }
    },

    {
      type: 'Feature',
      properties: {
        id: 3,
        'title': 'Dallas, T',
        "cityName": "dallas",
        "icon": {
          "iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png",
          "iconSize": [50, 50],
          "iconAnchor": [25, 25],
          "popupAnchor": [0, -25],
          "className": "dot"
        }
      },
      geometry: {
        type: 'Point',
        coordinates: [-96.85546875, 32.80574473290688]
      }
    }
  ]
};

var myLayer = L.mapbox.featureLayer().addTo(map);

myLayer.on('layeradd', function(e) {
  var marker = e.layer,
    feature = marker.feature;
  marker.setIcon(L.icon(feature.properties.icon));
});

myLayer.setGeoJSON(geojson);


// Search by city name	
$('#searchByName').keyup(cityMapSearch);

function cityMapSearch() {

  var searchString = $('#searchByName').val().toLowerCase();

  myLayer.setFilter(showCity);


  function showCity(feature) {

    if (feature.properties.cityName == searchString) {
      map.setView([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], 17);
    } else {
      return feature.properties.cityName
        .toLowerCase()
        .indexOf(searchString) !== -1;
    }
    return true;
  }

}

#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.search-field {
  position: absolute;  
  right: 0;
  bottom: 15px;
  width: 250px;
  height: 30px;
  font-size: 12px;
  text-align: left;
  padding: 5px;
  z-index: 100;
}

<link href="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>



<div id='map'></div>
<input type="text" id="searchByName" class="search-field" placeholder="Washington, Chicago or Dallas">

And a Fiddle

Answer 1

这是我的解决方案，它将缩放到、更改图标并打开与搜索字段输入匹配的功能的弹出窗口。我使用 .eachLayer() 方法循环遍历 myLayer 的功能并测试它们是否与搜索字符串匹配。我还简化了您包含的 showCity() 函数。我不确定为什么，但出于某种原因，search() 函数会缩放到但不是 .openPopup() 或 .setIcon() 当 .eachLayer() 出现在 .setFilter() 之前时。希望这对您有所帮助!

/* Goal: When full match between search string and feature:
1. Open tooltip of matched marker
2. Change the matched marker's custom image
*/

L.mapbox.accessToken = 'your_access_token';

//Create map object, set base tiles and view
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([38.13455657705411, -94.5703125], 4);

//Create an empty feature layer and add it to the map
var myLayer = L.mapbox.featureLayer().addTo(map);

//Define GeoJSON data
var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    properties: {
      id: 1,
      'title': 'Washington, D.C.',
      'cityName': 'washington',
      'icon': {
        'iconUrl': 'https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png',
        'iconSize': [50, 50],
        'iconAnchor': [25, 25],
        'popupAnchor': [0, -25],
        'className': 'dot'
      }
    },
    geometry: {
      type: 'Point',
      coordinates: [-77.03201, 38.90065]
    }
  },

    {
      type: 'Feature',
      properties: {
        id: 2,
        'title': 'Chicago, M',
        'cityName': 'chicago',
        'icon': {
          'iconUrl': 'https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png',
          'iconSize': [50, 50],
          'iconAnchor': [25, 25],
          'popupAnchor': [0, -25],
          'className': 'dot'
        }
      },
      geometry: {
        type: 'Point',
        coordinates: [-87.71484375, 41.80407814427234]
      }
    },

    {
      type: 'Feature',
      properties: {
        id: 3,
        'title': 'Dallas, T',
        'cityName': 'dallas',
        'icon': {
          'iconUrl': 'https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png',
          'iconSize': [50, 50],
          'iconAnchor': [25, 25],
          'popupAnchor': [0, -25],
          'className': 'dot'
        }
      },
      geometry: {
        type: 'Point',
        coordinates: [-96.85546875, 32.80574473290688]
      }
    }
  ]
};

//Set layer icons, create custom tooltips, populate myLayer with geojson data
myLayer.on('layeradd', function(e) {
  var marker = e.layer,
    feature = marker.feature;
  marker.setIcon(L.icon(feature.properties.icon));
  var content = '<h2>' + feature.properties.title + '</h2><p>' + feature.properties.cityName + '</p>';
  marker.bindPopup(content);
});
myLayer.setGeoJSON(geojson);

// Compare the 'cityName' property of each marker to the search string, seeing whether the former contains the latter.
function search() {
  //Get the value of the search input field
  var searchString = $('#search').val().toLowerCase();

  //Set filter needs to be declared first
  myLayer.setFilter(function(feature){
    //Return features whose city name contains the search string
    return feature.properties.cityName
      .toLowerCase()
      .indexOf(searchString) !== -1;
  });

  //Loop through each layer
  myLayer.eachLayer(function(marker) {
    //If user search input matches the feature's city name
    if (marker.feature.properties.cityName === searchString) {
      //Update icon url
      marker.setIcon(L.icon({iconUrl: 'https://www.mapbox.com/jobs/img/astro3.svg'}));
      //Zoom in and center on matching feature
      map.setView([marker.feature.geometry.coordinates[1], marker.feature.geometry.coordinates[0]], 17);
      //Open feature popup
      marker.openPopup();
    }
  });
}

//Event listener for user keyup within search field
$('#search').keyup(search);