我一直在使用谷歌地图一段时间,并且遇到了kml图层的限制(没有鼠标悬停只点击)
所以我想我会尝试数据层(geojson)
我似乎无法弄清楚如何更改图标(标记图像)。
我可以将所有标记更改为特定图像,但我希望能够使用8种不同图像中的一种,具体取决于我的db中的feature.property.generated
map.data.loadGeoJson('http://www.example.com/geojson.php?city_id=017');
// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
$('.map-tooltip').text(event.feature.getProperty('name'));
});
我的JSON文件
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
-117.1405,
33.551667
]
},
"icon":"http://maps.google.com/mapfiles/dir_0.png",
"properties":{
"name":"017001",
"heading":null,
"face":"North"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
-117.123269,
33.552172
]
},
"icon":"http://maps.google.com/mapfiles/dir_90.png",
"properties":{
"name":"050010",
"heading":null,
"face":"East"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
-117.122675,
33.55155
]
},
"icon":"http://maps.google.com/mapfiles/dir_60.png",
"properties":{
"name":"050011",
"heading":null,
"face":"South"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
-117.120978,
33.551613
]
},
"icon":"http://maps.google.com/mapfiles/dir_30.png",
"properties":{
"name":"050012",
"heading":null,
"face":"West"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
-117.118667,
33.6055
]
},
"icon":"http://maps.google.com/mapfiles/dir_walk_18.png",
"properties":{
"name":"017069",
"heading":null,
"face":"SE"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
-117.118667,
33.6055
]
},
"icon":"http://maps.google.com/mapfiles/dir_111.png",
"properties":{
"name":"017069",
"heading":null,
"face":"SW"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
-117.11,
33.5835
]
},
"icon":"http://maps.google.com/mapfiles/dir_81.png",
"properties":{
"name":"017070",
"heading":null,
"face":"NW"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
-117.11,
33.5835
]
},
"icon":"http://maps.google.com/mapfiles/dir_42.png",
"properties":{
"name":"017070",
"heading":null,
"face":"NE"
}
}
]
}
所以我不确定如何让图标文件起作用 TIA提供任何帮助
答案 0 :(得分:3)
要访问geoJson中的icon
属性(至少使用dataLayer方法),您需要将其移动到"属性"宾语。然后你就可以这样做(比如this example of dynamic styles in the documentation)
map.data.setStyle(function(feature) {
var icon=null;
if (feature.getProperty('icon')) {
icon = feature.getProperty('icon');
}
return /** @type {google.maps.Data.StyleOptions} */({
icon: icon
});
});
代码段
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map.data, 'addfeature', function(e) {
// auto center map on markers
if (e.feature.getGeometry().getType() === 'Point') {
bounds.extend(e.feature.getGeometry().get());
}
map.fitBounds(bounds);
});
// Set the icon from the "icon" property in the geoJson
map.data.setStyle(function(feature) {
var icon = null;
if (feature.getProperty('icon')) {
icon = feature.getProperty('icon');
}
return /** @type {google.maps.Data.StyleOptions} */ ({
icon: icon
});
});
map.data.addGeoJson(geoJson);
}
google.maps.event.addDomListener(window, "load", initialize);
// modified geoJson
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-117.1405,
33.551667
]
},
"properties": {
"name": "017001",
"heading": null,
"face": "North",
"icon": "http://maps.google.com/mapfiles/dir_0.png"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-117.123269,
33.552172
]
},
"properties": {
"name": "050010",
"heading": null,
"icon": "http://maps.google.com/mapfiles/dir_90.png",
"face": "East"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-117.122675,
33.55155
]
},
"properties": {
"icon": "http://maps.google.com/mapfiles/dir_60.png",
"name": "050011",
"heading": null,
"face": "South"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-117.120978,
33.551613
]
},
"properties": {
"icon": "http://maps.google.com/mapfiles/dir_30.png",
"name": "050012",
"heading": null,
"face": "West"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-117.118667,
33.6055
]
},
"properties": {
"icon": "http://maps.google.com/mapfiles/dir_walk_18.png",
"name": "017069",
"heading": null,
"face": "SE"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-117.118667,
33.6055
]
},
"properties": {
"icon": "http://maps.google.com/mapfiles/dir_111.png",
"name": "017069",
"heading": null,
"face": "SW"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-117.11,
33.5835
]
},
"properties": {
"icon": "http://maps.google.com/mapfiles/dir_81.png",
"name": "017070",
"heading": null,
"face": "NW"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-117.11,
33.5835
]
},
"properties": {
"icon": "http://maps.google.com/mapfiles/dir_42.png",
"name": "017070",
"heading": null,
"face": "NE"
}
}]
};

html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
&#13;