2016-11-14 78 views
0

將Google Maps API與地方圖書館一起使用我可以使用here顯示的推薦方法向附近的學校展示。Google Places 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'] 

雖然這在技術上是有效的,問題在於地圖只顯示了一堆沒有意義的默認標記,而沒有辦法知道它是什麼。

所以我的問題是:如何更改學校和商店的圖標?理想情況下,我會爲每種不同類型顯示不同的圖標。

回答

1

那比常規map.Only東西添加自定義標記不同的是,你需要做的api調用單獨爲每個type。所以即使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 
    }); 

經過this爲了更好地理解

而且每次的結果將有一個默認的圖標(如icon財產),也可以使用

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

完美的感謝,它是有道理的。 – user3256143