Question

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

匹配标记的弹出/工具提示显示为打开; 和
更改匹配标记的自定义图像。

提前感谢您的帮助！

以下是代码：

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);。希望这有帮助！

Post

地图框搜索，打开弹出/工具提示并更改自定义标记图像

1 个答案: