如何在传单js中使用标记传递数据
how to pass data with marker in leaflet js
我在项目中使用带有openstreetmap的传单js
我在地图上的同一个地方有多个圆环标记
我想在circlemarker中存储一些Id,这样我就可以确定点击circlemrker时应该引用哪些数据。
我的circlemarker是
var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 });
myMarker.addTo(map);
在这里,我将标题用于其他目的,这就是我不能使用它的原因。
有人能告诉我怎么做吗。
听起来您想向现有类添加新功能(函数、属性等)。为此,使用面向对象的主体是有意义的。为此,我建议您扩展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
使用当前版本的传单(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友好的方法:
数据标记.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;
}
}
其他文件.ts
import { DataMarker } from './DataMarker';
const marker = new DataMarker([ lat, lng ], anyData, markerOptions);
--
注意1:我决定不将标记选项与数据属性合并
注意2:如果需要更具体的,请调整数据类型
标记基本上是javascript对象rite。
下面的片段简单地解决了我的问题。
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
}
只需完成图片,创建一个处理程序,该处理程序将响应鼠标点击标记并提供访问新选项
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);
试试这个唯一识别传单标记,它对我有用。
//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
方法,所以希望这能帮助到别人。大多数其他例子只集中在产生标记的lat-long,e.latlng
。请注意,即使使用一整层/一组标记,也可以使用相同的代码。该功能将在每个单独的标记上工作。
我有一个简单的解决方案。options属性是存储自定义值的好地方。
var myMarker = L.circleMarker(myPoint, { custom_id: 'gisman', radius: 20 });
myMarker.addTo(map);
您可以很容易地检索选项中的值。
function markerOnClick(e) {
var id = e.options.custom_id;
}
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 如何使用 Angular JS 将数据保存在数据库中
- JS验证ajax返回的html中的表单数据
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 如何使用下划线js转换这些数据
- node.js请求数据事件未在CORS ajax调用中触发
- 通过连线将数据从js发送到控制器
- 在每次文件上传时发送带有放置区的自定义数据.js
- 节点.js 如何通过基本 Passport 在数据会话中维护所需的数据.js
- 如何从 c3 获取数据.js
- 存储来自多个回调节点的数据.js javascript
- 为什么我不能在 Angular JS 服务中更改数据.js执行函数后
- 在 vis 中访问节点数据.js单击处理程序
- 为什么使用 D3 显示数据.js看起来是截断的
- 检索车把中的专用阵列数据.js模板
- 如何使用挖空恢复模板中的数据.js
- 如何从节点中获取数据.js http get request
- 如何在角度图中实现这些数据.js
- 尝试复制 json 数据 js 时出现类型错误
- 如何在基于 Backbone 的模板中添加数据.js元素