带角度的谷歌地图 [英] Google maps with angular
问题描述
我想做一个需要集成谷歌地图api的项目.我需要自动完成、本地化和在地图上绘制路线.我怎么能用 angular 做到这一点，你能推荐我一个库吗?或者我如何使用 google maps api for javascript 做到这一点.该项目是使用 yeoman-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.
谢谢.
推荐答案
首先，如果您想让 Google Maps API 与 AngularJS 一起使用，您有两个解决方案:
First of all, if you want to get Google Maps API going with AngularJS you have two solutions:
我将向您展示如何轻松地从头开始.
I'm going to show you how to make it easy from scratch.
这是一个简单的 AngularJS 应用程序示例，其目的只是为了学习使用此类 API.我做了这个小小的 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.
这是一个有效的 Plunk 我忍受了这段代码.
This is a working Plunk I put up with this code.
您可以通过多种不同的方式使用 Google Maps API，只需查看文档或 StackOverflow 上的此处即可.
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:
并且，最后，您可以查看@Shreerang 制作的这个有效的 JSFiddlePatwardhan 使用折线(您一直想要的路线).
And, at the end, you can check this working JSFiddle made by @Shreerang Patwardhan using Polylines (Your long wanted routes).
对于未来的实现，请确保将 myMaps.js 指令放在一个单独的文件中，并在您的应用模块中注入它具有依赖项，以便获得 DRY(不要重复自己)和可维护性使用相同工作指令作为涉及 Google 地图的 Angular 应用程序的起点的应用程序.例如，您只需更改坐标或添加一些新地图选项即可启动需要 Google 地图的未来应用程序.
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.
你应该得到类似的东西:
You should get something like:
myApp.directive("myMap", function(){ . . . }); //Goes in a Separated File
var myApp = angular.module("myApp",['myMaps']); //Dependency Injection
希望对您有所帮助.
这篇关于带角度的谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
