带有 Google Places 库的 Google Maps 中不同地点类型的不同图像答案

【问题标题】：Different images for different place types in Google Maps with Google Places library带有 Google Places 库的 Google Maps 中不同地点类型的不同图像
【发布时间】：2012-07-15 17:46:09
【问题描述】：

我是 javascript 的新手，无法弄清楚使用谷歌地图中的地点库为不同类型地点的结果使用不同自定义图标的逻辑。例如 - 这将要求体育场和公园

var request = {
      location: myLatLng,
      radius: 20000,
      types: ['stadium','park']
    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);

回调函数包括创建标记函数

function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]); 
      } 
    }
}

创建标记函数如下所示

var emu = 'EMU_test_icon.png'

function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      icon: emu,
      position: place.geometry.location
    });

所以我知道如何分配所有标记以使用 EMU_test_icon 图像，但是如何将“体育场”位置类型的结果定向到我列出的图标 (emu)，但为“公园”的结果创建标记到不同的自定义图标 (image2)？

【问题讨论】：

标签： javascript google-maps google-maps-markers google-places

【解决方案1】：

传递给 createMarker 方法的“place”参数有一个可以提供帮助的“type”属性。请参阅 PlaceSearchResults 标题下的参考 here。

您可以将两个图标存储在地图中，并根据地点类型查找图标类型。

// store the icons in a map, key'd by type
var iconMap = {'stadium': 'EMU_test_stadium_icon.png', 'park': 'EMU_test_park_icon.png'};

// access types array from PlaceResult object
//  search to find the string "stadium" and "park"
//  default the type to stadium and check to see if place is a park
//  if its a park update the type of icon we select
//  in the original call to create a marker, get the icon string by type
function createMarker(place) {

    var placeLoc = place.geometry.location,
        isStadium = place.types.indexOf("stadium") !== -1,
        isPark = place.types.indexOf("park") !== -1,
        iconType = "stadium";

    if (isPark) {
        iconType = "park";
    }

    new google.maps.Marker({
        map: map,
        icon: iconMap[iconType],
        position: place.geometry.location
    });

}

*注意：这在 IE

*注2：假设你的“地图”变量在别处声明

【讨论】：