与谷歌地图角 [英] Google maps with angular
问题描述
我想打一个项目，我需要整合谷歌地图API。我需要自动完成，本地化和绘制地图上的路线。我怎样才能做到这一点具有角，可以我推荐这个图书馆吗？或者我怎么能做出这种与谷歌地图API为JavaScript。
使用自耕农-fullstack生成该项目。
I want to make a project where I need to integrate google maps api. I need autocomplete, localization and to draw a route on the map. How can I do this with angular, can you recommand me a library for this? Or how can I make this with google maps api for javascript. This project is generated using yeoman-fullstack.
感谢。
推荐答案
首先，如果你想获得的谷歌地图API 会是 AngularJS 有两种解决方法
First of all, if you want to get Google Maps API going with AngularJS you have two solutions:
- 使用<一个href=\"https://www.google.com/intx/en_uk/work/mapsearth/products/mapsapi.html?utm_source=HouseAds&utm_medium=cpc&utm_campaign=2015-Geo-EMEA-LCS-GEO-MAB-DeveloperTargetedHouseAds&utm_content=Developers&gclid=CKaOqLq82ckCFULmwgodRsUFyw\"相对=nofollow>从头谷歌地图API
- 使用角谷歌，地图
- Using Google Maps APIs from Scratch
- Using Angular-Google-Maps
我要告诉你如何可以很容易从头开始。
I'm going to show you how to make it easy from scratch.
这是谁的目的，仅使用这种API的学习容易AngularJS应用的一个例子。我要想在更大的应用程序中使用它使这个小AngularJS锻炼。
This is an example of an easy AngularJS application who's intended, only, to learn using such APIs. I've made this little AngularJS exercise in order to use it in bigger applications.
的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使用它们。
That's just a really basic way to get it started, I didn't even use a controller, even if you really should use them in AngularJS.
这是一个工作普拉克我忍受这$ C $角
This is a working Plunk I put up with this code.
您可以在许多不同的方式与谷歌地图API的发挥，只是看的文档，或在这里计算器。
You can play with Google Maps API's in many different ways, just look at the documentation or here on StackOverflow.
现在，如果你想管理2位置，标记等间的路由，你应该看看：
Now, if you want to manage routes between 2 locations, markers, etc, you should look at:
- Google Maps APIs Documentation
- This answer by @geocodezip
- This answer by @Gurpreet Singh
- This answer by @zeeshan0026
，并在结束时，可以检查这方面的工作的jsfiddle 通过@Shreerang Patwardhan做使用折线（你早就想路由）。
And, at the end, you can check this working JSFiddle made by @Shreerang Patwardhan using Polylines (Your long wanted routes).
有关未来的实现，保证把你的myMaps.js指令在分隔的文件和注入它有一个依赖于你的App模块为了获得DRY（不要重复自己）和可维护性使用相同的工作指令出任首发点涉及的谷歌地图应用程序角度应用。例如，你就可以只改变你的坐标或加入一些新地图的选项的kickstart需要谷歌地图未来的应用。
For future implementations, ensure to put your myMaps.js directive in a separated file and Inject it has a Dependency in your App Module In order to get DRY (Don't Repeat Yourself) and Maintainable applications using the same working directive as starter point for your Angular application involving Google Maps. For instance, you'll be able to just change your coordinates or adding some new map's option to kickstart future applications that require Google Maps.
您应该是这样的：
myApp.directive("myMap", function(){ . . . }); //Goes in a Separated File
var myApp = angular.module("myApp",['myMaps']); //Dependency Injection
我希望我已经帮助。
I hope I've been helpful.
这篇关于与谷歌地图角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
