AngularJS中的谷歌地图开发

最近做了一个基于angularJS 1.5 的手表定位后台管理系统，里面涉及到谷歌地图开发，特此记录！
总体来说，开发分为3步，引入秘钥—-指定容器—-创建实例。具体如下。

1.申请秘钥

去谷歌开发者中心申请秘钥（需翻墙）。

2.HTML页面

<div id="googleContainer" style="height: 100%"></div><script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=你的秘钥&language=zh-CN"></script>

3.JS

'use strict';let googleMap = angular.module('watchApp.googleMap', []);googleMap.controller("googleMapCtrl",["$scope", "$window", function ($scope,$window) {    $scope.point = {lat: 22.560118, lng: 114.004252}; //中心点    $scope.map = new google.maps.Map(document.getElementById("googleContainer"), {//创建谷歌地图        center: $scope.point,                       //地图的中心点        zoom: 13,               　　　　　　　　　　  //地图缩放比例        mapTypeId: google.maps.MapTypeId.ROADMAP,   //指定地图展示类型：卫星图像、普通道路        scrollwheel: true,          　　　　　　　　　 //是否允许滚轮滑动进行缩放        zoomControlOptions: {                      //缩放控件            position:google.maps.ControlPosition.TOP_LEFT  //设置位置 左上        },        //地图类型控件        mapTypeControlOptions: {            position:google.maps.ControlPosition.TOP_RIGHT        },        //街景小人控件        streetViewControlOptions: {            position:google.maps.ControlPosition.TOP_LEFT        },        // 启用缩放        scaleControl: true,    });    // 地图点击事件    $scope.map.addListener('click', function (e) {        $scope.getAddress(e);    });    // 获取点击地址    $scope.getAddress = function (e) {        let geocoder = new google.maps.Geocoder();        geocoder.geocode({ location: e.latLng }, function geoResults(results, status) {            if (status === google.maps.GeocoderStatus.OK) {                // do something            }        });    };    $scope.map.addListener('idle', function () { //地图闲置时触发        if ($scope.isCenterFlag) {            if($scope.pointCoordinate.lng === undefined)                return false;            $scope.map.panTo($scope.pointCoordinate);        }    });    $scope.pointCoordinate = {}; //当前选中点坐标    $scope.mapMakers = [];    // 创建覆盖物标签    $scope.createMark = function (val) {        let marker = new google.maps.Marker({            position: {lat: val.lat, lng: val.lng},            icon: "map/online.png",            animation: google.maps.Animation.DROP,            map: $scope.map // 地图实例对象        });        // 创建信息窗口实例        let infoWindow = new google.maps.InfoWindow({            content: "<p>这是信息窗口内容</p>",        });        // 标记点击事件        marker.addListener('click', function(e) {            // 打开信息窗口            infoWindow.open($scope.map, marker);            // e.latLng.lng() 获取点击点的精度            if ($scope.isCenterFlag) {                $scope.map.panTo({lat: 22.560118, lng: 114.004252}); // 地图中心移至指定点            }        });    };}]);

分享一个博主整理的地图开发API
原文地址 ： http://blog.csdn.net/silentmuh/article/details/53941203