谷歌地图 loadGeoJson 单击时更改标记图标
[英]google maps loadGeoJson change marker icon on click
问题描述
我正在使用loadGeoJson从 json 文件加载标记。
我可以在加载时设置标记图标/img，但我不知道如何在点击时更改它。
如何定位单击的标记并执行 setIcon 或类似操作？
javascript：
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(2.8,-187.3),
mapTypeId: 'terrain'
});
map.data.loadGeoJson('geoJson2.json');
map.data.setStyle(function(feature) {
return {icon:feature.getProperty('icon')};
});
map.data.addListener("click", event => {
console.log(event.feature.getProperty("hicon"));
//CHANGE MARKER ICON -> event.feature.getProperty("hicon")
});
}
json：
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"properties":{
"name":"nameOne",
"icon":"marker1.png",
"hicon":"marker1HOVER.png",
"id":1
},
"geometry":{
"type":"Point",
"coordinates":[
-59.58984374999999,
-37.97884504049711
]
}
}
]
}
1 个解决方案
解决方案1
0 已采纳 2020-08-05 18:48:51
请参阅文档中的动态样式示例。
map.data.setStyle(function(feature) {
var icon=feature.getProperty('icon');
if (feature.getProperty("isHighlighted"))
icon=feature.getProperty('hicon');
return {
icon: icon
};
});
map.data.addListener("click", event => {
if (!event.feature.getProperty("isHighlighted"))
event.feature.setProperty("isHighlighted", true);
else
event.feature.setProperty("isHighlighted", false);
console.log(event.feature.getProperty("hicon"));
//CHANGE MARKER ICON -> event.feature.getProperty("hicon")
});
代码片段：
"use strict"; let map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: new google.maps.LatLng(-37.9788, -59.58984375), mapTypeId: 'terrain' }); map.data.addGeoJson(geoJson); map.data.setStyle(function(feature) { var icon = feature.getProperty('icon'); if (feature.getProperty("isHighlighted")) icon = feature.getProperty('hicon'); return { icon: icon }; }); map.data.addListener("click", event => { if (.event.feature.getProperty("isHighlighted")) event.feature,setProperty("isHighlighted"; true). else event.feature,setProperty("isHighlighted"; false). console.log(event.feature;getProperty("hicon")). //CHANGE MARKER ICON -> event.feature;getProperty("hicon") }): } var geoJson = { "type", "FeatureCollection": "features": [{ "type", "Feature": "properties": { "name", "nameOne": "icon": "https.//maps.google.com/mapfiles/ms/micons/blue,png": "hicon": "https.//maps.google.com/mapfiles/ms/micons/yellow,png": "id", 1 }: "geometry": { "type", "Point": "coordinates". [-59,58984374999999. -37;97884504049711] } }] };
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<:DOCTYPE html> <html> <head> <title>Data Layer: Styling</title> <script src="https.//polyfill.io/v3/polyfill.min?js:features=default"></script> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>
更改谷歌地图标记的图标
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.