Question

我正在使用Places库和angular google places autocomplete模块。自动填充功能完美运行，点击后显示和选择结果。

我现在要做的是在用户选择自动填充的其中一个结果后从地址生成地图。

我的控制器中有以下功能：

$scope.$on('g-places-autocomplete:select', function(event, place) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { "address": place.name }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
            location = results[0].geometry.location,
                lat      = location.lat(),
                lng      = location.lng();

            var latlng = new google.maps.LatLng(lat,lng);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    });
});

它不起作用，我很确定它是因为它无法从前端访问map_canvas元素（它本身就在模板视图中）。

<div id="map_canvas" style="height:300px;"></div>

我如何链接两者（或将lat和lng变量传递给前端）以在用户选择结果时显示地图？

修改

我做了Plunkr来说明错误。你会看到，一旦你选择了一个位置，它会重新定位，在我的情况下是 http：// localhost：9000 /(1.650801,%2010.267894999999953)，是纬度和经度的最后一部分

Answer 1

好的 - 我调整了一些东西，主要是风格清晰。我认为你在变量声明方面存在一些问题。现在加载一个地图对象。我会让你展示数据： - ）

(function(){

  var app = angular.module('wopWop', ['google.places']);

  app.controller('MainController', function($scope){
        $scope.$on('g-places-autocomplete:select', function(event, place) {
          var loc, lat, lng, latlng, map, options,
              geocoder = new google.maps.Geocoder();

          geocoder.geocode( { "address": place.name }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
                    loc = results[0].geometry.location,
                    lat = loc.lat(),
                    lng = loc.lng();
                  }
            });
            latlng = new google.maps.LatLng(lat,lng);
            options = {
               zoom: 1,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), options);
        });
  });
})();

Plunkr

在AngularJS中将变量从Controller传递给View

1 个答案: