谷歌地圖使用角js

我正在嘗試使用角度js谷歌地圖而不使用'uiGmapgoogle地圖'，我無法使用範圍獲得地圖。因爲我能夠實現這一點使用平原js.May我知道我在做什麼錯誤了嗎？谷歌地圖使用角js

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>

來源

2017-07-10 Hema Nandagopal

如果我理解你正確地更正如下片段將幫助您

您需要使用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>

來源

2017-07-10 07:43:12

我試圖運行你的代碼，它拋出一些錯誤，你能檢查一下嗎？ –

我可以知道什麼是錯誤獲得？ –

我只是做了一些修改，即$ scope.googleMap函數的返回值是變化。請看一看 –

谷歌地圖使用角js

回答

相關問題