Как я могу открыть всплывающее окно в результатах поиска по листовкам без изменения синтаксиса кода? Я пробую другой пример из интернета, но ничего не работает.
var map = L.map('carsworld_maps',{
center:[46.8413245 , 9.8670981],
zoom:6,
gestureHandling: true,
maxZoom:13,
minZoom:5});
L.tileLayer('https://maps.heigit.org/openmapsurfer/tiles/roads/webmercator/{z}/{x}/{y}.png', {
attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> | Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var automaker_cw = {
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"properties":{
"popupContent":"<strong>Bla Bla</strong>",
"name":"gmc",
"title":"GMC",
},
"geometry":{
"type":"Point",
"coordinates":[-83.0402011 ,42.329261],
},
},
{
"type":"Feature",
"properties":{
"popupContent":"<strong>Bla bLA</strong>",
"name":"ford",
"title":"Ford",
},
"geometry":{
"type":"Point",
"coordinates":[-83.2140876 ,42.3149964],
},
},
{
"type":"Feature",
"properties":{
"popupContent":"<strong>Bla bLA</strong>",
"name":"tesla",
"title":"Tesla",
},
"geometry":{
"type":"Point",
"coordinates":[-122.1246969 ,37.4280016],
},
},
{
"type":"Feature",
"properties":{
"popupContent":"<strong>Bla bLA</strong>",
"name":"chrysler",
"title":"Chrysler",
},
"geometry":{
"type":"Point",
"coordinates":[-83.2340859 ,42.6545482],
},
},
{
"type":"Feature",
"properties":{
"popupContent":"<strong>Bla bLA</strong>",
"name":"volvo",
"title":"Volvo",
},
"geometry":{
"type":"Point",
"coordinates":[11.8408707 ,57.7185959],
},
},
{
"type":"Feature",
"properties":{
"popupContent":"<strong>Bla bLA</strong>",
"name":"volkswagen",
"title":"Volkswagen",
},
"geometry":{
"type":"Point",
"coordinates":[10.7640574 ,52.4298297],
},
},
{
"type":"Feature",
"properties":{
"popupContent":"<strong>Bla bLA</strong>",
"name":"toyota",
"title":"Toyota",
},
"geometry":{
"type":"Point",
"coordinates":[139.7490612 ,35.7035975],
},
},
]
};
function carsWorld_Auto(object ,latlng){
switch(object.properties["name"]){
case "gmc":
var gmc_headquarter = new L.icon({
iconUrl:"https://carsworld.ro/wp-content/uploads/2019/10/photo-camera-ygyfy128.png",
iconSize:[55 ,55],
iconAnchor:[32 ,64],
popupAnchor:[-3 ,-65]
});
return L.marker(latlng,{icon:gmc_headquarter});
case "ford":
var ford_headquarter = new L.icon({
iconUrl:"https://carsworld.ro/wp-content/uploads/2019/10/photo-camera-ygyfy128.png",
iconSize:[55 ,55],
iconAnchor:[60 ,64],
popupAnchor:[-30 ,-65]
});
return L.marker(latlng,{icon:ford_headquarter});
case "tesla":
var tesla_headquarter = new L.icon({
iconUrl:"https://carsworld.ro/wp-content/uploads/2019/10/photo-camera-ygyfy128.png",
iconSize:[55 ,55],
iconAnchor:[32 ,64],
popupAnchor:[-3 ,-65]
});
return L.marker(latlng,{icon:tesla_headquarter});
case "chrysler":
var chrysler_headquarter = new L.icon({
iconUrl:"https://carsworld.ro/wp-content/uploads/2019/10/photo-camera-ygyfy128.png",
iconSize:[55 ,55],
iconAnchor:[32 ,64],
popupAnchor:[-3 ,-65]
});
return L.marker(latlng,{icon:chrysler_headquarter});
case "volvo":
var chrysler_headquarter = new L.icon({
iconUrl:"https://carsworld.ro/wp-content/uploads/2019/10/photo-camera-ygyfy128.png",
iconSize:[55 ,55],
iconAnchor:[32 ,64],
popupAnchor:[-3 ,-65]
});
return L.marker(latlng,{icon:chrysler_headquarter});
case "volkswagen":
var chrysler_headquarter = new L.icon({
iconUrl:"https://carsworld.ro/wp-content/uploads/2019/10/photo-camera-ygyfy128.png",
iconSize:[55 ,55],
iconAnchor:[32 ,64],
popupAnchor:[-3 ,-65]
});
return L.marker(latlng,{icon:chrysler_headquarter});
case "toyota":
var chrysler_headquarter = new L.icon({
iconUrl:"https://carsworld.ro/wp-content/uploads/2019/10/photo-camera-ygyfy128.png",
iconSize:[55 ,55],
iconAnchor:[32 ,64],
popupAnchor:[-3 ,-65]
});
return L.marker(latlng,{icon:chrysler_headquarter});
}
};
/*Search Bar Cars World*/
geojsonOpts = {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: L.divIcon({
className: feature.properties.title,
iconSize: L.point(16, 16),
})
}).bindPopup(feature.properties.title+'<br>');
}
};
var poiLayers = L.layerGroup([L.geoJson(automaker_cw, geojsonOpts)]);
L.control.search({
position:'topright',
layer: poiLayers,
initial: true,
zoom: 18,
marker: false,
propertyName: 'title',
buildTip: function(text, val) {
var type = val.layer.feature.properties.title;
return '<a href="#" class="'+type+'">'+text+'</a>';}
}).addTo(map);
L.geoJson(automaker_cw, {
pointToLayer: carsWorld_Auto,
onEachFeature: function (object, content) {
content.bindPopup(object.properties.popupContent);
}
}).addTo(map);
#carsworld_maps{
height:400px;
width:100%;
}
<html>
<head>
<link rel='stylesheet' id='leaflet-style-css' href='https://carsworld.ro/wp-content/themes/cars_world_custom_theme/leaflet-maps/leaflet.css?ver=5.2.4' type='text/css' media='all' />
<link rel='stylesheet' id='leaflet-handling-css' href='https://carsworld.ro/wp-content/themes/cars_world_custom_theme/leaflet-maps/leaflet-gesture-handling.css?ver=5.2.4' type='text/css' media='all' />
<link rel='stylesheet' id='leaflet-search-css' href='https://carsworld.ro/wp-content/themes/cars_world_custom_theme/leaflet-maps/leaflet_search.css?ver=5.2.4' type='text/css' media='all' />
<script type='text/javascript' src='https://carsworld.ro/wp-content/themes/cars_world_custom_theme/leaflet-maps/leaflet.js?ver=5.2.4'></script>
<script type='text/javascript' src='https://carsworld.ro/wp-content/themes/cars_world_custom_theme/leaflet-maps/leaflet_gesture_handling.js?ver=5.2.4'></script>
<script type='text/javascript' src='https://carsworld.ro/wp-content/themes/cars_world_custom_theme/leaflet-maps/leaflet-search.js?ver=5.2.4'></script>
</head>
<body>
<div id="carsworld_maps"></div>
</body>
</html>
Я создал объект для хранения информации слоя. После этого я создал функцию и с помощью оператора switch назначил каждому слою различные свойства. Наконец, я нашел в интернете кое-что о панели поиска листовок, все работает нормально, но я не удивляюсь, как открыть всплывающее окно при поиске результатов. Я пробую множество примеров из Интернета, например:
searchName.on('search_locationfound', function(e) {
e.layer.setStyle({radius: 5.0, fillColor: 'red', color: 'red', fillOpacity: 1});
marker = new L.Marker(e.latlng);
marker.on('click', markerOnClick);
map.addLayer(marker);
});
map.addControl(searchName);