지도 검색, 열린 팝업/툴팁 및 맞춤 마커 이미지 변경

맞춤 마커 이미지와 검색 필드가있는지도 박스지도가 있습니다. 검색 문자열과 마커의 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 \t 
 
$('#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

출처

2016-09-15 Keranski

가 여기 내 해결책에 확대의 아이콘을 변경하고, 검색과 일치하는 기능의 팝업을 엽니 다 : 여기

코드입니다 필드 입력. myLayer의 기능을 반복하고 검색 문자열과 일치하는지 테스트하려면 .eachLayer() 메서드를 사용했습니다. 또한 포함 된 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);

출처

2016-11-14 20:36:09

지도 검색, 열린 팝업/툴팁 및 맞춤 마커 이미지 변경

답변

관련 문제