Google maps api 3 在google maps apiv3中使用geojson加载每个点的自定义图标

我使用谷歌地图已经有一段时间了，但在kml图层上遇到了一些限制（没有鼠标，只有点击）

所以我想我会试用数据层（geojson）

我似乎不知道如何更改图标（标记图像）

我可以将所有标记更改为特定图像，但我希望能够使用8个不同图像中的一个，具体取决于从我的数据库生成的feature.property

 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要获得任何帮助

要访问geoJson中的

图标

属性（至少使用数据层方法），需要将其移动到“properties”对象中。然后你可以这样做（比如）

代码片段：

var映射；
var bounds=new google.maps.LatLngBounds（）；
函数初始化（）{
var map=new google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
google.maps.event.addListener（map.data，'addfeature'，function（e）{
//标记上的自动居中贴图
如果（例如，feature.getGeometry（）.getType（）=='Point'）{
extend（例如feature.getGeometry（）.get（））；
}
映射边界（bounds）；
});
//从geoJson中的“icon”属性设置图标
map.data.setStyle（函数（特性）{
var-icon=null；
if（feature.getProperty（'icon'））{
icon=feature.getProperty（'icon'）；
}
return/**@type{google.maps.Data.StyleOptions}*/({
图标：图标
});
});
map.data.addGeoJson（geoJson）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
//修改的geoJson
var geoJson={
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-117.1405，
33.551667
]
},
“财产”：{
“名称”：“017001”，
“标题”：空，
“面”：“北”，
“图标”：”http://maps.google.com/mapfiles/dir_0.png"
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-117.123269，
33.552172
]
},
“财产”：{
“名称”：“050010”，
“标题”：空，
“图标”：”http://maps.google.com/mapfiles/dir_90.png",
“面”：“东”
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-117.122675，
33.55155
]
},
“财产”：{
“图标”：”http://maps.google.com/mapfiles/dir_60.png",
“名称”：“050011”，
“标题”：空，
“面”：“南”
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-117.120978，
33.551613
]
},
“财产”：{
“图标”：”http://maps.google.com/mapfiles/dir_30.png",
“名称”：“050012”，
“标题”：空，
“脸”：“西方”
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-117.118667，
33.6055
]
},
“财产”：{
“图标”：”http://maps.google.com/mapfiles/dir_walk_18.png",
“名称”：“017069”，
“标题”：空，
“脸”：“SE”
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-117.118667，
33.6055
]
},
“财产”：{
“图标”：”http://maps.google.com/mapfiles/dir_111.png",
“名称”：“017069”，
“标题”：空，
“面”：“SW”
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-117.11，
33.5835
]
},
“财产”：{
“图标”：”http://maps.google.com/mapfiles/dir_81.png",
“名称”：“017070”，
“标题”：空，
“面”：“NW”
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-117.11，
33.5835
]
},
“财产”：{
“图标”：”http://maps.google.com/mapfiles/dir_42.png",
“名称”：“017070”，
“标题”：空，
“面”：“NE”
}
}]
};
html，
身体
#地图画布{
高度：500px；
宽度：500px；
边际：0px；
填充：0px
}


map.data.setStyle(function(feature) {
  var icon=null;
  if (feature.getProperty('icon')) {
    icon = feature.getProperty('icon');
  }
  return /** @type {google.maps.Data.StyleOptions} */({
    icon: icon
  });
});