Я пытаюсь разместить переменную поиска Google Карт. В списке показаны все маркеры, и под этими маркерами должен быть поле поиска. По мере того, как список растет, поисковый запрос перемещается вниз. Я использую эту библиотеку: Angular Google Maps Существует директива, называемая <ui-gmap-search-box>
. Но он должен быть внутри <div id="map_canvas"> </div>
, а список находится за пределами этого div
.Google Maps Searchbox Positioning (библиотека угловых google-карт)
0
A
ответ
0
Я думаю, вы должны использовать пользовательские функции управления, предоставляемые API Карт Google.
Вы можете размещать элементы управления в левом верхнем углу ваших карт и создавать прослушиватели событий для вашего контроля и выполнять свою работу оттуда.
Дополнительную информацию о пользовательских элементах управления см. В разделе documentation.
Кроме того, я сделал некоторые быстрые изменения до this sample и сделал этот пример здесь. Надеюсь, поможет.
var map;
//var chicago = new google.maps.LatLng(41.85, -87.65);
/**
* The CenterControl adds a control to the map that recenters the map on Chicago.
* This constructor takes the control DIV as an argument.
* @constructor
*/
controlUIs = [];
function CenterControl(controlDiv, map) {
locations = [new google.maps.LatLng(37.7833, -122.4167),
new google.maps.LatLng(37.3382, -121.8863),
new google.maps.LatLng(37.4223662, -122.0839445),
new google.maps.LatLng(37.8694772, -122.2577238),
new google.maps.LatLng(37.7919615, -122.2287941),
new google.maps.LatLng(37.6256441, -122.0413544)
];
for (var i = 0; i < locations.length; i++) {
// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlUIs[i] = controlUI;
controlDiv.appendChild(controlUIs[i]);
// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Location ' + i;
controlText.location = locations[i];
controlUIs[i].appendChild(controlText);
// Setup the click event listeners: simply set the map to
// Chicago
google.maps.event.addDomListener(controlUIs[i], 'click', function(click) {
map.setCenter(click.target.location)
});
}
}
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(37.6326196, -122.1568744)
}
map = new google.maps.Map(mapDiv, mapOptions);
// Create the DIV to hold the control and
// call the CenterControl() constructor passing
// in this DIV.
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(centerControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>
0
Я использовал API окна поиска Google Maps вместо окна поиска библиотеки.
main.js:
var searchBox = function() {
var input = document.getElementById('autocomplete');
var searchBox = new google.maps.places.SearchBox(input);
google.maps.event.addListener(searchBox, 'places_changed', function() {
});
}; // end searchBox
Функция SearchBox() выполняется в $scope.init()
.
index.html:
<input id="autocomplete" ng-model="newPlace" type="text">
Смежные вопросы
- 1. Google maps api SearchBox
- 2. searchBox Google Maps с разбивкой на страницы
- 3. Positioning Масштаб управления В Google Maps API
- 4. google maps infowindow positioning with polylines
- 5. Передача результатов поиска в Google Maps SearchBox службе Directions
- 6. SearchBox Google Maps не работает C# MVC 3
- 7. Как использовать Google Maps в угловых 2
- 8. Установите границы Google Maps с помощью угловых google-карт
- 9. Сложность импорт SearchBox от «реагировать-Google-карта»
- 10. Библиотека локатора магазина Google Maps с MarkerClusterer
- 11. Библиотека для создания динамических маркеров Google Maps?
- 12. Google, как SearchBox в Silverlight
- 13. Ошибка «слишком много рекурсии» с Google Maps + библиотека мест
- 14. Android - Google Maps, библиотека Служб Google Play, ссылающаяся на
- 15. Searchbox не работает в google map
- 16. Google Images heterogeneous Thumb Positioning
- 17. Как объединить RichMarker в директиве угловых google-maps
- 18. SearchBox в GWT Maps V3 Api (branflake2267/GWT-Maps-V3-Api версия 3.8.1)
- 19. Неполноценный слушатель Google Maps
- 20. Google Searchbox не проверяется как HTML5
- 21. Searchbox для google map вообще не отображается
- 22. Использование угловых-Google-места-автозаполнение
- 23. Google Maps API MarkerManager
- 24. Google maps maps view
- 25. Android: Google maps maps
- 26. Фильтрация маркеров Google Maps
- 27. Google Maps from Razor
- 28. Использование PHP/MySQL с картами Google с автозаполнения SearchBox
- 29. Google maps componentRestrictions не работает
- 30. support-native-maps поддержка офлайн google maps
Сообщение некоторый код ваш, и объяснить, что вы возникли проблемы с точно. – doldt