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

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

匹配标记的弹出窗口/工具提示显示为打开状态； 及

更改匹配标记的自定义图像

提前感谢您的帮助

代码如下：

L.mapbox.accessToken='pk.eyj1ijoibmfkaisimeoijjaw43a2hyoxywmdjrd29semd6bmzha2juin0.ne1hjjjgg2rlxm_oMrysyg'；
var map=L.mapbox.map（'map'，'mapbox.streets'）
.setView（[38.13455657705411，-94.5703125]，4）；
var myLayer=L.mapbox.featureLayer（）.addTo（map）；
var geojson={
类型：“FeatureCollection”，
特点：[{
键入：“功能”，
特性：{
id:1，
“标题”：“华盛顿特区”，
“城市名称”：“华盛顿”，
“图标”：{
“iconUrl”：https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png",
“iconSize”：[50,50]，
“iconAnchor”：[25,25]，
“popupAnchor”：[0，-25]，
“类名称”：“点”
}
},
几何图形：{
键入：“点”，
座标：[-77.03201，38.90065]
}
}, {
键入：“功能”，
特性：{
id:2，
‘标题’：‘芝加哥，M’，
“城市名称”：“芝加哥”，
“图标”：{
“iconUrl”：https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png",
“iconSize”：[50,50]，
“iconAnchor”：[25,25]，
“popupAnchor”：[0，-25]，
“类名称”：“点”
}
},
几何图形：{
键入：“点”，
座标：[-87.71484375，41.80407814427234]
}
},
{
键入：“功能”，
特性：{
id:3，
“标题”：“达拉斯，T”，
“城市名称”：“达拉斯”，
“图标”：{
“iconUrl”：https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png",
“iconSize”：[50,50]，
“iconAnchor”：[25,25]，
“popupAnchor”：[0，-25]，
“类名称”：“点”
}
},
几何图形：{
键入：“点”，
座标：[-96.85546875,32.80574473290688]
}
}
]
};
var myLayer=L.mapbox.featureLayer（）.addTo（map）；
myLayer.on（'layeradd'，函数（e）{
var标记=e.layer，
feature=marker.feature；
marker.setIcon（L.icon（feature.properties.icon））；
});
setGeoJSON（geojson）；
//按城市名称搜索
$（#searchByName'）.keyup（cityMapSearch）；
函数cityMapSearch（）{
var searchString=$（'#searchByName'）.val（）.toLowerCase（）；
myLayer.setFilter（showCity）；
功能展示城市（特色）{
if（feature.properties.cityName==searchString）{
map.setView（[feature.geometry.coordinates[1]，feature.geometry.coordinates[0]]，17）；
}否则{
返回feature.properties.cityName
.toLowerCase（）
.indexOf（searchString）！=-1；
}
返回true；
}
}

#地图{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
身高：100%；
}
.搜索字段{
位置：绝对位置；
右：0；
底部：15px；
宽度：250px；
高度：30px；
字体大小：12px；
文本对齐：左对齐；
填充物：5px；
z指数：100；
}

---

这是我的解决方案，它将缩放、更改图标，并打开与搜索字段输入匹配的功能弹出窗口。我使用

.eachLayer（）

方法循环查看

myLayer

的功能，并测试它们是否匹配搜索字符串。我还简化了您包含的

showCity（）

函数。我不知道为什么，但由于某种原因，

search（）

函数会在

.setFilter（）

之前出现

.openPopup（）

或

.setIcon（）

时缩放到

.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);

/*目标：当搜索字符串和功能完全匹配时：
1.打开匹配标记的工具提示
2.更改匹配标记的自定义图像
*/
L.mapbox.accessToken='your_access_token'；
//创建地图对象，设置基础平铺和视图
var map=L.mapbox.map（'map'，'mapbox.streets'）
.setView（[38.13455657705411，-94.5703125]，4）；
//创建一个空要素图层并将其添加到地图中
var myLayer=L.mapbox.featureLayer（）.addTo（map）；
//定义GeoJSON数据
var geojson={
类型：“FeatureCollection”，
特点：[{
键入：“功能”，
特性：{
id:1，
“标题”：“华盛顿特区”，
“城市名称”：“华盛顿”，
“图标”：{
“iconUrl”：”https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png',
“iconSize”：[50,50]，
“iconAnchor”：[25,25]，
“popupAnchor”：[0，-25]，
“className”：“dot”
}
},
几何图形：{
键入：“点”，
座标：[-77.03201，38.90065]
}
},
{
键入：“功能”，
特性：{
id:2，
‘标题’：‘芝加哥，M’，
“城市名称”：“芝加哥”，
“图标”：{
“iconUrl”：”https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png',
“iconSize”：[50,50]，
“iconAnchor”：[25,25]，
“popupAnchor”：[0，-25]，
“className”：“dot”
}
},
几何图形：{
键入：“点”，
座标：[-87.71484375，41.80407814427234]
}
},
{
键入：“功能”，
特性：{
id:3，
“标题”：“达拉斯，T”，
“城市名称”：“达拉斯”，
“图标”：{
“iconUrl”：”https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png',
“iconSize”：[50,50]，
“iconAnchor”：[25,25]，
“popupAnchor”：[0，-25]，
“className”：“dot”
}
},
几何图形：{
键入：“点”，
座标：[-96.85546875,32.80574473290688]
}
}
]
};
//设置图层图标，创建自定义工具提示，用geojson数据填充myLayer
myLayer.on（'layeradd'，函数（e）{