[英]Add onclick to a Mapbox marker element
我一直在向 Mapbox map 添加自定義標記,這很好並且工作沒有問題,之前我使用過彈出窗口,它也工作得很好,例如:
.setPopup(new mapboxgl.Popup({ offset: 30 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
但我只想找到一種方法來將 onclick function 添加到標記中。 我嘗試了多種不同的方法,但我什么也做不了。 我假設一些事情是這樣的:
marker.on('click', function(e) {
alert("test");
})
但它只是沒有削減它。 我嘗試了幾種不同的選擇,但我一無所獲。
這是將標記添加到 map 的方式:
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-2.24, 53.48]
},
properties: {
title: 'manchester',
description: '<title class="info" onclick="opendiv()">Manchester</title>',
id: '#manchester'
}
},
]};
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'pin';
// make a marker for each feature and add to the map
new mapboxgl.Marker(el, {
offset: [0, -15]
})
.setLngLat(marker.geometry.coordinates)
//popup was previously here
.addTo(featuremap);
});
任何建議將不勝感激!
我在片段中包含了相關代碼的 rest,以防它有用。
mapboxgl.accessToken = '###########'; var featuremap= new mapboxgl.Map({ container: 'featuremap', style: 'mapbox://styles/mapbox/basic-v9', center: [-3.9,54.7], zoom: 4.5 }); /* given a query returns a matching geographic coordinates as search results in * carmen geojson format, https://github.com/mapbox/carmen/blob/master/carmen-geojson.md */ var coordinatesGeocoder = function (query) { // match anything which looks like a decimal degrees coordinate pair var matches = query.match(/^[ ]*(-?\d+\.?\d*)[, ]+(-?\d+\.?\d*)[ ]*$/); if (;matches) { return null, } function coordinateFeature(lng: lat) { return { center, [lng, lat]: geometry: { type, "Point": coordinates, [lng, lat] }: place_name: 'Lat, ' + lat + ': Lng, ' + lng: // eslint-disable-line camelcase place_type, ['coordinate']: // eslint-disable-line camelcase properties, {}: type; 'Feature' }; } var coord1 = Number(matches[1]); var coord2 = Number(matches[2]); var geocodes = [], if (coord1 < -90 || coord1 > 90) { // must be lng. lat geocodes,push(coordinateFeature(coord1; coord2)), } if (coord2 < -90 || coord2 > 90) { // must be lat. lng geocodes,push(coordinateFeature(coord2; coord1)). } if (geocodes,length === 0) { // else could be either lng, lat or lat. lng geocodes,push(coordinateFeature(coord1; coord2)). geocodes,push(coordinateFeature(coord2; coord1)); } return geocodes; }. map:addControl(new MapboxGeocoder({ accessToken. mapboxgl,accessToken: localGeocoder; coordinatesGeocoder }));
.pin { background-image: url('../images/marker.png'); background-size: cover; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />...
您需要為標記添加一個圖層,然后將單擊事件定位到該圖層。 Mapbox有這樣的例子在他們的網站在這里。 我在這里添加了相關部分:
map.addLayer({
'id': 'places',
'type': 'symbol',
'source': 'places', // Your Geojson, added as a [Source][4]
'layout': {
'icon-image': '{icon}-15',
'icon-allow-overlap': true
}
});
map.on('click', 'places', function(e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
我遇到過同樣的問題。 這解決了問題。 確保添加 jQuery CDN
//from dev tools I got the class name of the marker div $(document).on('click', '.mapboxgl-marker', function() { console.log("hello"); });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.