Google 地图 angular

Question

我想创建一个需要集成 google 地图 api 的项目。我需要自动完成、本地化并在地图上绘制路线。我怎样才能用 angular 做到这一点，你能为我推荐一个图书馆吗？或者我如何使用 google 地图 api for javascript 来实现这一点。本项目使用yeoman-fullstack生成。

谢谢。

Answer 1

您可以使用 Angular google 地图。 Angular Google Maps 是一组用 CoffeeScript 和 Javascript 编写的指令（angular-ui 的一部分），它将 Google Maps 集成在一个AngularJS 应用程序。当然还有许多其他指令用于此目的。

https://angular-ui.github.io/angular-google-maps/

Answer 2

首先，如果你想获得 Google 地图 API 与 AngularJS 你有两个解决方案：

使用Google Maps APIs from Scratch
使用Angular-Google-Maps

我将向您展示如何从头开始让它变得简单。

这是一个简单的 AngularJS 应用程序示例，仅用于学习使用此类 APIs。我做了这个小 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 我忍受了这段代码。

您可以通过许多不同的方式使用 Google 地图 API，只需查看文档或 Whosebug 上的此处。

现在，如果您想管理 2 个位置、标记等之间的路线，您应该查看：

Google Maps APIs Documentation
This answer by @geocodezip
This answer by @Gurpreet Singh
This answer by @zeeshan0026

最后，您可以查看@Shreerang Patwardhan 使用多段线（您一直想要的路线）制作的this working JSFiddle。

对于未来的实现，确保将你的 myMaps.js 指令放在一个单独的文件中，并 将它注入你的应用程序模块 为了获得 DRY（Don 't Repeat Yourself) 和可维护的应用程序使用相同的工作指令作为涉及 Google 地图的 Angular 应用程序的起点。例如，您将能够仅更改您的坐标或添加一些新地图的选项来启动需要 Google 地图的未来应用程序。

你应该得到类似的东西：

myApp.directive("myMap", function(){ . . . }); //Goes in a Separated File

var myApp = angular.module("myApp",['myMaps']); //Dependency Injection

希望对您有所帮助。

Google 地图 angular

Google maps with angular

javascript

google-maps

google-api

angularjs

yeoman