将ID添加到地图框标记
Adding an ID to Mapbox Marker
我正在尝试向每个标记添加一个id
,以便在使用JQuery而不是内置的弹出功能单击标记时触发模式窗口。我想用属性"id"填充id
。
我知道我需要递归地遍历和添加id,但我不知道如何实现这一点。我该怎么做?
var geojson = [{
"type": "Feature",
"geometry": {
"coordinates": [-86.781602, 36.162664],
"type": "Point"
},
"properties": {
"id": 001,
"title": "POI #1",
"image": "http://lorempixel.com/image_output/city-h-c-524-822-2.jpg",
"filter-1": true,
"filter-2": false,
"filter-3": false,
"filter-4": true,
"filter-5": false,
"marker-color": "#1087bf",
"marker-size": "medium",
"marker-symbol": ""
}
}];
JSFiddle
这是一个使用Mapbox GL JS的快速破解。我创建了一个默认标记,只想用一种快速的方法来更改光标,而不需要做额外的编码。
以下是创建标记的代码:
this.marker = new mapboxgl.Marker({
draggable: true,
color: "#D80739",
}).setLngLat(centre);
我添加了一个ID:
this.marker._element.id = "my-marker";
然后使用CSS ID选择器进行样式设置:
#my-marker {
cursor: pointer;
}
您需要执行一个for
循环。我已经用正确的代码更新了你的fiddle,以循环遍历你的geojson
变量的长度,添加一个名为propertiesID
的新字段,然后将其设置为properties
加上id
字段,这样你就得到了properties1
、properties2
等。
代码更改可以在fiddle 的第90行找到
for (var i=0; i<geojson.length; i++){
geojson[i].properties.propertiesID = "properties" + geojson[i].properties.id
//Logs out each object's properties in your array
console.log(geojson[i].properties)
}
可能不是一个有效的解决方案,但它就是这样。
JSFiddle
for (var key in geojson) {
if (geojson.hasOwnProperty(key)) {
// console.log(key + " -> " + geojson[key]);
var poi = geojson[key];
var marker_id = poi.properties.id;
var latitude = poi.geometry.latitude;
var longitude = poi.geometry.longitude;
var filterOne = poi.properties.filterOne;
// render marker
markers[poi.properties.id] = L.marker([latitude, longitude],{
filterOne: poi.properties.filterOne,
filterTwo: poi.properties.filterTwo,
filterThree: poi.properties.filterThree,
name: poi.properties.name
}).addTo(map);
//assign id
markers[poi.properties.id]._icon.id = poi.properties.id;
}
}
相关文章:
- 谷歌地图可以't添加正确的标记ID
- Html地图对象-点击地图获取id的一部分
- 如何获取yandex地图上点击的位置标记的id
- 使用范围作为 id 在传单中创建地图
- 将ID添加到地图框标记
- 如何通过它引用谷歌地图标记's id并激活它's使用javascript单击事件
- jQuery谷歌地图按Id获取标记
- 根据 id 从谷歌地图 API 中删除多个标记
- Javascript:将类应用于多个 Id 用于交互式地图
- 我的代码在下面,我想更改 ID 与地图外部的
- 如何在谷歌地图API中将类或ID添加到叠加层
- 谷歌地图API,根据id显示和隐藏标记
- 如何在 OpenLayers 地图中按 id 获取弹出窗口
- 如何检索谷歌地图客户端ID
- Fusion Tables&带侧边栏的地图:非洲地图样本中从数字到加密的ID
- 在谷歌地图api上用id覆盖标记点
- 将ID添加到Google地图标记,然后定位它
- 如何设置谷歌地图's按ID居中
- 谷歌地图:按Id查找多边形
- 如何将谷歌地图标记ID与按钮上动态创建的ID相匹配