从谷歌地图检索坐标

时间:2015-12-09 03:15:52

标签: javascript angularjs google-maps ng-map

此plunker显示谷歌地图。

http://plnkr.co/edit/BfYggKO8nDolhmpq92dq?p=preview

<!DOCTYPE html>
<html ng-app="ngMap">

<head>
  <title>Simle Map</title>
  <meta name="description" content="Simple Map">
  <meta name="keywords" content="ng-map,AngularJS,center">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
  <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
</head>

<body>
  <ng-map center="[40.74, -74.18]"></ng-map>
</body>

</html>

我想知道地图上特定点的坐标。如果用户右键单击地图上任意点上的鼠标按钮,则会出现一个显示坐标的警报。

代码使用angularjs和ng-map模块。 http://ngmap.github.io/

1 个答案:

答案 0 :(得分:2)

我认为你应该添加一个事件监听器,然后在这个事件中显示这样的坐标:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Simle Map</title>
<meta name="description" content="Simple Map">
<meta name="keywords" content="ng-map,AngularJS,center">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script>
  var app = angular.module('myApp', ['ngMap']); 
  app.controller('EventDomListenerController', function($window) {
    var vm = this;
    vm.showAlert = function(event, args) {
      $window.alert(event.latLng.lat()+', '+event.latLng.lng());
    }
  });
</script>
</head>

<body ng-controller="EventDomListenerController as vm">
  <ng-map center="[40.74, -74.18]" on-click="vm.showAlert()"></ng-map>
</body>
</html>

Live Plunker