Я хочу создать проект, где мне нужно интегрировать карты google api. Мне нужна автозаполнение, локализация и рисование маршрута на карте. Как я могу сделать это с помощью углового, вы можете рекомендовать мне библиотеку для этого? Или как это сделать с помощью Google Maps api для javascript. Этот проект генерируется с использованием yoman-fullstack.Google maps with angular
Спасибо.
Прежде всего, если вы хотите получить Google Maps API происходит с AngularJS у вас есть два решения:
Я покажу вам, как сделать это легко с нуля.
Это пример простого приложения AngularJS, предназначенного только для изучения таких API. Я сделал это небольшое упражнение AngularJS, чтобы использовать его в больших приложениях.
Index.html:
<html ng-app="myApp"> <!--Your App-->
<head>
<title>AngularJS-Google-Maps</title>
<link rel="stylesheet" href="style.css">
<script src="../lib/angular.min.js"></script>
<script src="app.js"></script>
<!-- You have to look for a Maps Key, you can find it on Google Map
Api's website if you pay a bit of attention-->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=
YourKey&sensor=false">
</script>
</head>
<body>
<!--Custom directive my-maps, we will get our map in here-->
<my-maps id="map-canvas"></my-maps>
</body>
</html>
app.js:
var myApp = angular.module("myApp",[]);
//Getting our Maps Element Directive
myApp.directive("myMaps", function(){
return{
restrict:'E', //Element Type
template:'<div></div>', //Defining myApp div
replace:true, //Allowing replacing
link: function(scope, element, attributes){
//Initializing Coordinates
var myLatLng = new google.maps.LatLng(YourLat,YourLong);
var mapOptions = {
center: myLatLng, //Center of our map based on LatLong Coordinates
zoom: 5, //How much we want to initialize our zoom in the map
//Map type, you can check them in APIs documentation
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Attaching our features & options to the map
var map = new google.maps.Map(document.getElementById(attributes.id),
mapOptions);
//Putting a marker on the center
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:"My town"
});
marker.setMap(map); //Setting the marker up
}
};
});
style.css:
//Just giving our container Height and Width + A Red border
#map-canvas{
height: 400px;
width: 700px;
border: 2px solid red;
}
Это просто на самом деле б Как я понял, я даже не использовал контроллер, даже если вы действительно должны использовать их в AngularJS.
Это рабочий Plunk Я мириться с этим кодом.
Вы можете играть с API Карт Google разными способами, просто посмотрите документацию или на StackOverflow.
Теперь, если вы хотите управлять маршрутами между 2 места, маркеры и т.д., вы должны смотреть на:
И, в конце, вы можете проверить this working JSFiddle, сделанные @Shreerang Patwardhan с использованием Polylines (ваши долгожданные маршруты).
Для будущих реализациях, обеспечить, чтобы положить вашу директиву myMaps.js в отдельном файле и Inject имеет Завис в вашем App модуля Для того, чтобы получить DRY (не повторяться) и поддерживаемых приложений с использованием тех же рабочая директива как стартовая точка для вашего Углового приложения с использованием Google Maps. Например, вы сможете просто изменить свои координаты или добавить новый вариант карты для запуска будущих приложений, требующих Google Maps.
Вы должны получить что-то вроде:
myApp.directive("myMap", function(){ . . . }); //Goes in a Separated File
var myApp = angular.module("myApp",['myMaps']); //Dependency Injection
Я надеюсь, что я был полезным.
Вы можете использовать угловые карты Google. Угловые Карты Google - это набор директив (часть углового-ui), написанных на CoffeeScript и Javascript, которые объединяют Карты Google в приложениях AngularJS. Разумеется, для этой цели существует множество других директив.
Спасибо за ваш ответ, но с этим api я не нашел, как я может провести маршрут. Вы знаете, как я могу это сделать? – Dorin
Возможный дубликат [Google maps for AngularJS] (http://stackoverflow.com/questions/20355968/google-maps-for-angularjs) – theodor