2015-09-01 144 views
0

我必須在我的離子應用程序(用於Android)中集成谷歌地圖圈。我從this鏈接安裝插件。我遵循所有步驟,但我有一個問題。當我調用map.addCircle()函數時,logcat返回錯誤「未捕獲類型錯誤:未定義不是函數」。谷歌地圖插件與離子

我該如何解決這個問題?

這是我controller.js:

angular.module('starter', ['ionic']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 


    // Wait until the map is ready status. 

    }); 
}) 

.controller('MapCtrl', function($scope, $ionicLoading, $compile) { 

    var geocoder; 
    geocoder = new google.maps.Geocoder(); 
    function initialise() { 

     navigator.geolocation.getCurrentPosition(onSuccess, onError); 
    function onSuccess(position){ 
     var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
     $scope.latlng = myLatlng; 
     console.log($scope.latlng); 


     var mapOptions = { 
     zoom: 15, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     } 


     var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
     var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     }); 
     map.addCircle({ 
      'center': myLatlng, 
      'radius': 300, 
      'strokeColor' : '#AA00FF', 
      'strokeWidth': 5, 
      'fillColor' : '#880000' 
     }); 
     $scope.map = map; 


    } 
    function onError(error){ 
     alert('code: ' + error.code + '\n' + 
       'message: ' + error.message + '\n'); 
    } 
    } 
    google.maps.event.addDomListener(window, 'load', initialise); 

}) 

回答

0

採用了棱角分明,谷歌,地圖從this解析鏈接。

一旦你安裝NG-map.js,您可以創建HTML頁面圈與此代碼:

<shape name="circle" stroke-color="#FF0000" stroke-opacity="0.8" stroke-weight="2" fill-color="#FF0000" fill-opacity="0.35" center="<someCoordinates>" radius="10"> 
    </shape>