谷歌地图使用角度js

时间:2017-07-10 07:36:39

标签: html angularjs

我试图使用角度js进行谷歌地图而不使用' uiGmapgoogle-maps'并且我无法使用范围来获取地图。因为我能够使用普通的j来实现这一点。我知道我在哪里做错了吗?



var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
     $scope.googleMap = function() {
     alert()
        $scope.mapOptions1 = {
            center: new google.maps.LatLng(51.508742, -0.120850),
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        $scope.map1 = new google.maps.Map(document.getElementById("googleMap1"), $scope.mapOptions1);
        return map1;

    }
});

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>

 <div id="googleMap1" ng-model="googleMap()" style="width:100%;height: 228px;"></div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

如果我理解你正确遵循更正的片段会帮助你

您需要使用ng-init来执行功能,而不是ng-model

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.googleMap = function() {
    $scope.mapOptions1 = {
      center: new google.maps.LatLng(51.508742, -0.120850),
      zoom: 9,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    $scope.map1 = new google.maps.Map(document.getElementById("googleMap1"), $scope.mapOptions1);
    return $scope.map1;

  }
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    First Name: <input type="text" ng-model="firstName"><br>

    <div id="googleMap1" ng-init="googleMap()" style="width:100%;height: 228px;"></div>
  </div>