Как я могу найти пользовательские оверлеи внутри просмотра улиц?
Привет, я искал все в Интернете и stackru.
Кто-нибудь знает, как найти пользовательское наложение в определенном месте в представлении улиц Google Maps?
Вот пример:
В этом туре вы можете увидеть, что есть некоторые значки и предметы, расположенные в определенных местах.
Кто-нибудь знает как это сделать? Это удивительно, и я хочу знать, как это сделать.
У меня есть опыт работы с API карт Google JavaScript, но я не могу этого сделать.
Я решил это с помощью этой библиотеки https://github.com/marmat/google-maps-api-addons
Это результат: http://www.paneek.net/
2 ответа
Я думаю, что это может быть актуально: https://developers.google.com/maps/documentation/javascript/examples/streetview-overlays
Это пример размещения маркеров на карте улиц. Сначала он определяет местоположение места, затем определяет маркер, давая ему такие свойства, как значок и имя.
var map;
var panorama;
var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);
function initialize() {
// Set up the map
var mapOptions = {
center: astorPlace,
zoom: 18,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Setup the markers on the map
var cafeMarker = new google.maps.Marker({
position: cafe,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var bankMarker = new google.maps.Marker({
position: bank,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Bank'
});
var busMarker = new google.maps.Marker({
position: busStop,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** @type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
}
function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Я нашел это, глядя на то, как добиться подобной вещи:
- http://projects.teammaps.com/projects/streetviewoverlay/streetviewoverlay.htm
- http://projects.teammaps.com/projects/streetviewtour/tour.htm
Я все еще ищу решение, и я нашел несколько хороших библиотек, внешних по отношению к службам Google:
- http://leandigo.github.io/leanorama/ довольно красиво, но, похоже, не поддерживает Firefox
- http://photo-sphere-viewer.js.org/markers.html - лучший вариант imho
Действительно, использование решения вне API Google имеет свои плюсы и минусы - но эта оценка зависит от вас.