戴上標誌角地圖

var app = angular.module('myapp', ['ngMap']); 
 
app.controller('PolygonArraysCtrl', function (NgMap) { 
 
    var myCenter; 
 
    var vm = this; 
 
    var latlong = []; 
 
    var infoWindow = new google.maps.InfoWindow(); 
 

 

 
    NgMap.getMap().then(function (map) { 
 
     vm.map = map; 
 
    }); 
 

 

 

 

 
    vm.showArrays = function (event) { 
 

 
     vm.method1 = function() { alert("shaishav") }; 
 

 
     latlong = new Array; 
 
     $("#label_CoOrdinates").html(""); 
 
     // Since this polygon has only one path, we can call getPath() 
 
     // to return the MVCArray of LatLngs. 
 
     var vertices = this.getPath(); 
 

 
     var contentString = '<b>Bermuda Triangle polygon</b><br>' + 
 
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() + 
 
      '<br>'; 
 

 
     // Iterate over the vertices. 
 
     for (var i = 0; i < vertices.getLength() ; i++) { 
 
      var xy = vertices.getAt(i); 
 
      contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' + 
 
       xy.lng(); 
 
      latlong.push(xy.lat() + "_" + xy.lng()); 
 
     } 
 
     $("#label_CoOrdinates").text(latlong); 
 

 
     $.ajax({ 
 
      type: "POST", 
 
      dataType: "json", 
 
      url: "/Home/Index", 
 
      data: { position: $("#label_CoOrdinates").text() }, 
 
      success: function (Data) { 
 
       var mydata = Data; 
 
       
 

 
       $.each(mydata.data, function (index, element) { 
 

 

 
        /*Add Marker to th map*/ 
 
        myCenter = new google.maps.LatLng(mydata.data[index].Latitude, mydata.data[index].Longitude); 
 
        vm.postition = myCenter; 
 
        alert(vm.postition); 
 
        /*Push marker element into markers array*/ 
 
        vm.positions = myCenter; 
 
        
 

 
        var marker = new google.maps.Marker({ 
 
         position: myCenter, 
 
         map: map, 
 
         title: 'Hello World!' 
 
        }); 
 

 
       }); 
 

 

 
      }, 
 
      error: function() { 
 
       alert('Error - '); 
 
      } 
 
     }); 
 

 

 
     // Replace the info window's content and position. 
 
     //infoWindow.setContent(contentString); 
 
     //infoWindow.setPosition(event.latLng); 
 

 
     infoWindow.open(vm.map); 
 
    } 
 
});

@{ 
 
    Layout = null; 
 
} 
 
<!DOCTYPE html> 
 
<html ng-app="myapp"> 
 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script> 
 
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script> 
 
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 
    <script src="~/Scripts/app.js"></script> 
 
</head> 
 
<body> 
 
    <div ng-controller="PolygonArraysCtrl as vm"> 
 
     <label id="label_CoOrdinates" style="display:none"></label> 
 
     <ng-map zoom="12" center="38.681659, -121.351705" map-type-id="TERRAIN"> 
 
     <shape name="polygon" on-click="vm.showArrays()" paths="[ [38.681659, -121.351705], [38.535092, -121.481367], [38.621188 , -121.270555]]" 
 
        stroke-color="#FF0000" 
 
        stroke-opacity="0.8" 
 
        stroke-weight="2" 
 
        fill-color="#FF0000" 
 
        fill-opacity="0.35" 
 
        editable="true" 
 
        draggable="true"> 
 
       
 
      </shape> 
 
      <marker ng-repeat="p in vm.positions" position="{{p}} "></marker> 
 
     </ng-map> 
 
     
 
      
 
     
 
     <input type="submit" ng-click=" vm.showArrays.method1()" value="Submit" /> 
 
    </div> 
 
</body> 
 
</html>

這是我在app.js我得到lat和長標記，但我不知道如何把它們放在它的maps.And爲每個循環，所以我需要所有的標記來..也當我拖動我的多邊形，並點擊它之前的標記將刪除和新的標記出現。

來源

2016-01-19 shaishav shukla

在AngularJS中，您不需要使用jQuery和$ .ajax來執行HTTP請求（GET或POST），您可以輕鬆使用$http service。

然後，從後端服務接收到您的數據後，您可以將它們分配給$ scope屬性，並在ngRepeat循環中綁定。

所以在HTML做到這一點：

<ng-map center="{{cx.latitude}}, {{cx.longitude}}" zoom="7"> 
    <marker ng-repeat="p in places track by $index" position="{{p.lat}}, {{p.lng}}"></marker> 
</ng-map>

在JS控制器：

app.controller('mapCtrl', function(NgMap, $scope, $http) { 

    var url = "places.json"; 
    $http({ 
     method: 'GET', 
     url: url 
    }).then(function(response) { 
     // success 
     console.log(response); 
     $scope.cx = response.data.cx; 
     $scope.places = response.data.places; 

     NgMap.getMap().then(function(map) { 
     var cx = map.getCenter(); 
     var txt = "center is: lat=" + cx.lat() + ", lng=" + cx.lng(); 
     console.log(txt); 
     }); 

    }, function(err) { 
     // error 
    }); 
});

見該工作示例：http://plnkr.co/edit/KUCMVdgRZ3TsN9P0FlZR?p=preview

來源

2016-01-19 08:32:08 beaver

嗨海狸，我能夠從數據庫中提取數據，並數據在mycenter變量中可用。我的中心包括我需要繪製標記的位置。現在，我對如何在變量mycenter中繪製ngmap中的標記感到震驚。 –

''指令（來自ngMap）必須將位置設置爲包含經緯度逗號分隔的字符串;所以如果'place'等於'{latitude：xyz，longitude：xyz}'，指令必須以這種方式寫入'' – beaver

在你的代碼中，你爲mycenter分配了一個google.maps.LatLng（）對象... 指令不需要這個。但是在你的代碼中還有其他問題......嘗試使我的例子適應你的需求。 – beaver

戴上標誌角地圖

回答

相關問題