Question

将Google Maps API与地方图书馆一起使用，我可以使用here所示的推荐方法向附近的学校展示。

var map;
var infowindow;

function initMap() {
  var pyrmont = {lat: -33.867, lng: 151.195};

  map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 15
  });

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: pyrmont,
    radius: 500,
    type: ['store']
  }, callback);
}

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

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

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

这是一个工作小提琴：https://jsfiddle.net/api/post/library/pure/

问题在于，如果我还想展示附近的商店和学校，每个人似乎都建议只是这样做：

type: ['store', 'school']

虽然这在技术上有效，但问题是地图只显示了一堆毫无意义的默认标记，无法知道它是什么。

所以我的问题是：如何更改学校和商店的图标？理想情况下，我会为每种不同的类型显示不同的图标。

Answer 1

与在常规地图中添加自定义标记没有什么不同。唯一的问题是，您需要为每个function createMarker(place) { var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ icon:"http://example.com/icon.png", //<-- only this line is enough for icon map: map, position: place.geometry.location });分别进行api调用。所以即使icon也能正常工作，您也会得到结果但是var marker = new google.maps.Marker({ icon:place.icon, map: map, position: place.geometry.location });中没有类型说明符来判断它是学校还是商店。还需要创建单独的回调来设置单独的图标

{{1}}

通过https://jsfiddle.net/U3pVM/28214/以获得更好的理解

此外，每个结果都会有一个默认图标（{{1}}属性），也可以使用

{{1}}

Google Places API显示学校和商店

1 个答案: