Google Places API显示学校和商店(Google Places API show schools and stores)

将Google Maps API与地方库结合使用，我可以使用此处显示的推荐方法向附近的学校展示。

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']

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

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

Using the Google Maps API with the places library I am able to show nearby schools using the recommended method shown 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); }); }

Here's a working fiddle: https://jsfiddle.net/api/post/library/pure/

The problem is that if I also want to show nearby stores as well as schools, everyone seems to recommend simply doing this:

type: ['store', 'school']

While this technically works, the problem is the map just shows a bunch of meaningless default markers with no way of knowing what it what.

So my question is: How can I change the icon for the schools and stores? Ideally I would show a different icon for each different type.

最满意答案

这与在常规地图中添加自定义标记没有什么不同。只是你需要为每种type分别进行api调用。甚至type: ['store', 'school']可以工作，你得到的结果但是没有类型results中的说明符，告诉它是学校还是商店。还需要创建单独的回调来设置单独的图标

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 });

通过这个以获得更好的理解

此外，每个结果都有一个默认图标（作为icon属性），也可以使用

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

It's no different than adding custom marker in regular map.Only thing is that you need to make api calls separately for each type.So even type: ['store', 'school'] would work and you get results but there is no type specifier in the results to tell whether it's a school or shop .Also you would need to create their separate callbacks for setting their separate icons

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 });

go through this for a better understanding

Moreover every result will have a default icon (as icon property), that can also be used

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

更多推荐