在角度应用中添加坐标到谷歌地图

时间:2014-08-15 11:14:25

标签: javascript angularjs google-maps

使用角度框架时,如何向谷歌地图“中心”添加坐标。 我用

在我的页面上替换了坐标
coordinates: <td>{{lat}},{{lng}}</td>

我有下面的代码不起作用,我哪里错了?

<google-map center="map.center" zoom="zoom" draggable="true" options="options">

我用这个

得到以下错误
  

错误:[$ parse:syntax]

     

语法错误:令牌'纬度'位于表达式[{3}]的第{2}列,从[{4}]开始。   下面是获取坐标值的控制器:

.controller('UncatCtrl', function ($scope, $http, $routeParams) {

$http.get('http://94.125.132.253:8000/getuncategorisedplaces').success(function (data, status, headers) {

    $scope.places = data;
    console.log(data);
    $scope.message = 'Uncategorised places';
})
$scope.id = $routeParams.id;
$scope.showplace = function(id) {
  $http({method: 'GET', url: 'http://94.125.132.253:8000/getitemdata?ID=' + $scope.id}).
      success(function(data, status, headers, config) {
          $scope.place = data;               //set view model
          console.log(data);

          console.log(id);

           $scope.view = 'templates/detail.html';
          console.log(data.place.lat);
  $scope.map =
{
center: {
  latitude : data.place.lat,
   longitude : data.place.lng,

 },
zoom: 13,

}

3 个答案:

答案 0 :(得分:1)

请尝试这样:在你的控制器上创建一个变量,它将保存属性的整个字符串值,然后绑定到它。

$scope.centerCoords = '[{latitude:' + $scope.latitude + '},longitude:{'+ $scope.latitude + '}]'

(我不熟悉谷歌地图sintax,所以请原谅我,如果上面的代码不准确,只要修复它,如果是这样的话)

然后像这样绑定它:

<google-map center="{{centerCoords}}" zoom="zoom" draggable="true" options="options">

顺便说一句,google-map是一个自定义指令吗?

答案 1 :(得分:0)

试试这个:<google-map center="[{latitude:{{latitude}},longitude:{{longitudes}}}]" zoom="zoom" draggable="true" options="options">

答案 2 :(得分:0)

AngularJS Google Map指令的工作方式不会在center属性中评估您的表达式。有关详细信息,请参阅official documentation并修复代码,执行以下操作:

 // in your UncatCtrl make the following object
 $scope.map = 
 {
  center: {
   latitude: $scope.latitude, 
   longitude: $scope.longitude 
  }, 
  zoom: 14
 };

 // in your google-map html element use
 <google-map center="map.center" ...></google-map>

这是一个工作小提琴 http://jsfiddle.net/hpeinar/m8n9x5xn/