我在我的项目中使用带有 openstreetmap 的传单 js。
我在地图的同一位置有多个圆圈标记。
我想在那个 circlemarkers 中存储一些 Id，这样我就可以确定在点击 circlemarker 时应该参考哪些数据。
我的圆圈标记是
var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 });
myMarker.addTo(map);
我在这里将标题用于其他目的，这就是为什么我不能使用它。
谁能告诉我一些方法来做到这一点。
【问题讨论】：
标签： javascript leaflet
听起来您想向现有类添加新功能（函数、属性等）。为此使用面向对象的主体是有意义的。为此，我建议您扩展 CircleMarker 类以添加这些属性。
customCircleMarker = L.CircleMarker.extend({
options: {
someCustomProperty: 'Custom data!',
anotherCustomProperty: 'More data!'
}
});
现在，当您创建圆形标记时，请改为创建扩展对象的实例。
var myMarker = new customCircleMarker(myPoint, {
title: 'unselected',
radius: 20,
someCustomProperty: 'Adding custom data to this marker!',
anotherCustomProperty: 'More custom data to this marker!'
});
myMarker.addTo(map);
现在您可以像从标记中获取任何其他选项一样获取属性。这只是一个简单的扩展案例，您可以根据需要做更多的事情，例如为对象添加其他属性或函数。
JSFiddle 示例：JSFiddle
【讨论】：
L.CircleMarker.extend。 “CircleMarker”中的“C”必须大写。还在我的答案中添加了一个 JSFiddle。
使用当前版本的传单（0.8-dev），您可以在标记对象本身上设置自定义属性，而无需创建自定义标记类...
function map() {
return L.map('leaflet-canvas',
{
maxZoom: 10,
minZoom: 0,
crs: L.CRS.Simple
});
}
var map = map().setView([0, 0], 10).on('click', onMapClick);
function onMapClick(e) {
var marker = L.circleMarker(e.latlng, {draggable:true});
marker.myCustomID = Math.floor((Math.random() * 100) + 1);
marker.on('click', onMarkerClick);
map.addLayer(marker);
// 'click' the new marker to show the ID when marker created
marker.fireEvent('click');
}
function onMarkerClick(e) {
alert(e.target.myCustomID);
}
【讨论】：
这是一种 TypeScript 友好的方式：
DataMarker.ts
import * as L from 'leaflet';
export class DataMarker extends L.Marker {
data: any;
constructor(latLng: L.LatLngExpression, data: any, options?: L.MarkerOptions) {
super(latLng, options);
this.setData(data);
}
getData() {
return this.data;
}
setData(data: any) {
this.data = data;
}
}
SomeOtherFile.ts
import { DataMarker } from './DataMarker';
const marker = new DataMarker([ lat, lng ], anyData, markerOptions);
--
注意 1：我决定不将标记选项与 data 属性合并
注意 2：如果您需要更具体的内容，请调整数据类型
【讨论】：
Record<string, any> 与any 来稍微更具体一些。很可能是键值对？
DataMarker 是扩展 L.Marker 的自定义对象。因此，其中的data 属性可以根据某人的需要而具体化。
marker 基本上是 javascript 对象仪式。
下面sn-p简单解决我的情况。
var marker = new L.marker([13.0102, 80.2157]).addTo(mymap).on('mouseover', onClick);
marker.key = "marker-1";
var marker2 =new L.marker([13.0101, 80.2157]).addTo(mymap).on('mouseover', onClick);
marker2.key = "marker-2";
function onClick(e) {
alert(this.key); // i can expect my keys here
}
【讨论】：
试试这个Uniquely identifying Leaflet Markers，它对我有用。
//Handle marker click
var onMarkerClick = function(e){
alert("You clicked on marker with customId: " +this.options.myCustomId);
}
//Create marker with custom attribute
var marker = L.marker([36.83711,-2.464459], {myCustomId: "abc123"});
marker.on('click', onMarkerClick);
【讨论】：
我建议以标准 GeoJSON 格式为标记构建数据，这样可以兼容直接保存为 shapefile 等。
var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 });
myMarker.properties.id = your_Id;
myMarker.addTo(map);
检索存储的信息并对其进行处理或将其传递给程序的其他部分，显示示例 onclick 函数：
myMarker.on('click',markerOnClick);
function markerOnClick(e) {
my_ID = e.layer.properties.id;
console.log(my_ID, e.latlng);
// do whatever you want with my_ID
}
我花了一段时间才找到e.layer.properties 访问单击标记属性的方法，所以希望这对某人有所帮助。大多数其他示例只关注产生标记的经纬度，e.latlng。
请注意，即使使用一整层/一组标记，您也可以使用相同的代码。该功能适用于每个单独的标记。
【讨论】：
只是为了完成图片，创建一个处理程序，该处理程序将响应鼠标点击标记并提供访问新选项
function onMarkerClick(e) {
console.log("You clicked the marker " + e.target.options.someCustomProperty);
console.log("You clicked the marker " + e.target.options.anotherCustomProperty);
}
marker.on('click', onMarkerClick);
【讨论】：
我有一个简单的解决方案。每个 circleMarker 中的 options 属性是存储自定义值的好地方。
var myMarker = L.circleMarker(myPoint, { custom_id: 'gisman', radius: 20 });
myMarker.addTo(map);
您可以轻松检索选项中的值。
function markerOnClick(e) {
var id = e.options.custom_id;
}
【讨论】：