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

AngularJS中的谷歌地图开发相关推荐

谷歌地图开发地图不能显示_Google，为什么地图不能让我在家工作？
谷歌地图开发地图不能显示 The year is 2018, and telecommuting is at an all-time high. Working from home has never ...
Android程序地图,在定制的Android应用程序中使用谷歌地图
我收到以下问题(显示在LogCat中).我希望any1可以帮助我,因为我是android应用程序开发的新手.在定制的Android应用程序中使用谷歌地图 11-17 16:50:38.087: E/A ...
如何在cad中导入谷歌地图_如何在Google地图中设置出发和到达时间
如何在cad中导入谷歌地图 Unless you work from home, Google Maps is fantastic at knowing where you need to be, a ...
如何在cad中导入谷歌地图_如何在Google地图中避开收费公路
如何在cad中导入谷歌地图 No one likes to pay to be able to drive on a specific road, especially if you're just ...
可集成在XPage中的谷歌地图控件
OpenNTF推荐项目"谷歌地图控件",可集成在XPage中,支持基于坐标和基于地址两种方式. ... 内容详见可集成在XPage中的谷歌地图控件
谷歌地图开发：地理编码和反地理编码
谷歌地图Geocoding说明:内容主要来自谷歌官网的文档,谷歌地图android api地理和反地理编码反应迟钝内容有时不准确,这里使用的googlemap的webapi接口.嗯,需要vpn这个不多 ...
在iOS中进行Mapbox地图开发杂谈
最近因项目需要,在app中要集成Mapbox,并且要能与苹果地图切换使用.从最早认识Mapbox到最终集成完毕,中间有一些断断续续,但总的时间也不算短了,关于这方面的资料其实是比较少的,能参考的基本都 ...
如何网页中嵌入谷歌地图
方法一 : 打开谷歌地图----左上角菜单----分享或嵌入地图----嵌入地图----默认"中"改为自定义尺寸----设置尺寸后复制代码到网页即可,可调成width:响应式100 ...
ArcGIS中添加谷歌地图、天地图、高德地图、Bing...在线地图（附插件下载）
很久之前我们推荐过好两款ArcGIS在线地图插件,这个链接:我把谷歌地图.高德地图.天地图.Bing-都装进了ArcGIS 不知道什么情况最近多了不少留言: 看到留言后我们立马重新安装查看. 当时推荐 ...

AngularJS中的谷歌地图开发

1.申请秘钥

2.HTML页面

3.JS

AngularJS中的谷歌地图开发相关推荐

最新文章

热门文章