<分区>
我想创建一个需要集成 google maps api 的项目。我需要自动完成、本地化并在 map 上绘制路线。我怎么能用 Angular 来做这个，你能给我推荐一个图书馆吗？或者我怎样才能用 google maps api for javascript 来做这个。 该项目是使用 yeoman-fullstack 生成的。
谢谢。
<分区>
我想创建一个需要集成 google maps api 的项目。我需要自动完成、本地化并在 map 上绘制路线。我怎么能用 Angular 来做这个，你能给我推荐一个图书馆吗？或者我怎样才能用 google maps api for javascript 来做这个。 该项目是使用 yeoman-fullstack 生成的。
谢谢。
最佳答案
首先，如果您想让 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
}
};
});
样式.css:
//Just giving our container Height and Width + A Red border
#map-canvas{
height: 400px;
width: 700px;
border: 2px solid red;
}
这只是一个非常基本的开始方式，我什至没有使用 Controller ，即使你真的应该在 AngularJS 中使用它们。
这是一个有效的 Plunk我忍受了这段代码。
您可以通过多种不同方式使用 Google Maps API，只需查看文档或 StackOverflow 上的此处即可。
现在，如果您想管理 2 个位置、标记等之间的路线，您应该查看:
最后，您可以检查 this working JSFiddle由@Shreerang Patwardhan 使用折线(您一直想要的路线)制作。
对于 future 的实现，请确保将您的 myMaps.js 指令放在一个单独的文件中，并在您的应用程序模块中注入(inject)它具有依赖性，以便获得 DRY(不要重复自己)和可维护使用相同工作指令作为涉及 Google map 的 Angular 应用程序起点的应用程序。例如，您将能够仅更改您的坐标或添加一些新 map 的选项来启动 future 需要 Google map 的应用程序。
你应该得到这样的东西:
myApp.directive("myMap", function(){ . . . }); //Goes in a Separated File
var myApp = angular.module("myApp",['myMaps']); //Dependency Injection
希望我对您有所帮助。
关于javascript - 带 Angular 谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34254687/
相关文章：
java - Google map api "directions"返回 HTTP 响应代码 : 400
javascript - 当用户点击内部链接时显示 html 页面的一部分
javascript - 在 JavaScript 中取消转义 HTML 实体？
javascript - 在 Mobile Angular Ui 中隐藏特定页面的侧边栏。(Angular Js)
javascript - 如何在适用于 IOS 的 meteor cordova 应用程序中使用谷歌地图
javascript - Angular-route1.6.1 无法正常工作
javascript - 添加时如何获取新的 ng-repeat 元素以动画背景颜色？
android - flutter : How to launch the Google Map app with "directions" to a predefined location?