javascript - 带 Angular 谷歌地图

原文 标签 javascript angularjs google-maps google-api yeoman

关闭。这个问题需要更多 focused .它目前不接受答案。












想改进这个问题?更新问题,使其仅关注一个问题 editing this post .

6年前关闭。




Improve this question




我想做一个需要集成google maps api的项目。我需要自动完成、本地化并在 map 上绘制路线。我怎么能用 Angular 做到这一点,你能给我推荐一个图书馆吗?或者我怎样才能用 google maps api for javascript 来做这个。
这个项目是使用 yeoman-fullstack 生成的。

谢谢。

最佳答案

首先,如果你想得到谷歌地图 API AngularJS 你有两个解决方案:

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

  • 我将向您展示如何从头开始轻松实现。

    这是一个简单的 AngularJS 应用程序示例,它仅用于学习使用此类 API。为了在更大的应用程序中使用它,我做了这个小小的 AngularJS 练习。

    索引.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 个位置、标记等之间的路线,您应该查看:
  • Google Maps APIs Documentation
  • This answer by @geocodezip
  • This answer by @Gurpreet Singh
  • This answer by @zeeshan0026

  • 最后,您可以查看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/

    相关文章:

    javascript - 你如何从 href 调用 AngularJS $scope.Function?

    android - 无法解析权限符号

    javascript - JavaScript代码会卡住页面一段时间-如何防止这种情况发生?

    javascript - 在 Angular 中异步加载工厂中的坐标

    javascript - 从 Angular js 中的 web api 下载 csv 文件

    java - 如何确定Android中的位置?

    wordpress - 升级 WP 插件后出现 Google Maps API V3 错误

    Javascript parseInt() 函数只能工作一次?

    javascript - Coffee脚本和浏览器缓存

    javascript - 如何在 Ionic 中仅将 Controller 变量的值作为参数传递