首先，如果您想让 AngularJS使用* Google Maps API ，则有两种解决方案： *
- 从头开始使用Google Maps API
- 使用Angular-Google-Maps
我将向您展示如何从头开始。
这是一个简单的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 DirectivemyApp.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。
您可以通过许多不同的方式使用Google Maps API，只需查看文档或StackOverflow上的此处。
现在，如果要管理2个位置，标记等之间的路线，则应查看：
- Google Maps API文档
并且，最后，您可以使用Polylines（您想要的长途路线）检查@Shreerang
Patwardhan制造的此JSFiddle。
对于将来的实现，请确保将myMaps.js指令放在单独的文件中，并 在应用模块中注入它具有依赖性，
以便使用与启动点相同的工作指令获取DRY（请勿重复自己）和可维护的应用程序您的涉及Google
Maps的Angular应用程序。例如，您将能够只更改坐标或添加一些新地图选项来启动需要Google Maps的未来应用程序。
您应该得到类似以下内容：
myApp.directive("myMap", function(){ . . . }); //Goes in a Separated Filevar myApp = angular.module("myApp",['myMaps']); //Dependency Injection希望对您有所帮助。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）