从表单中获取值并将其传递给 angularjs 中的函数

Question

2 个字段用于地图坐标( longitude/latitude ) 如何绑定input field，当任何坐标传入时，地图坐标会自动更新

HTML

<label>Longitude</label>
<input type="text" class="form-control" ng-model="vm.lon">
<label>Longitude</label>
<input type="text" class="form-control" ng-model="vm.lat">

JS

function Controller($scope) {
    var vm = this;

    var map = new mapboxgl.Map({
        zoom: 9,
        center: [0, 0],
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
    });

    map.flyTo({ center: [vm.lon, vm.lat], zoom: 7 });

}

地图使用 mapbox，应该没有提交按钮。

Answer 1

在你的控制器中声明 lon 和 lat 后试试这个...

function Controller($scope) {
$scope.vm = {
lon:'',
lat:''};

var map = new mapboxgl.Map({
    zoom: 9,
    center: [0, 0],
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
});

map.flyTo({ center: [$scope.vm.lon, $scope.vm.lat], zoom: 7 });
}

Answer 2

请先重构你的代码。

<label>Longitude</label>
<input type="text" class="form-control" ng-keyup="vm.change()" ng-model="vm.data.lon">
<label>Longitude</label>
<input type="text" class="form-control" ng-keyup="vm.change()" ng-model="vm.data.lat">

function Controller() {
var vm = this;
vm.data={};
var map = new mapboxgl.Map({
    zoom: 9,
    center: [0, 0],
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
});
vm.change=function(){
   map.flyTo({ center: [vm.data.lon, vm.data.lat], zoom: 7 });
}`

从表单中获取值并将其传递给 angularjs 中的函数

Get value from form and pass it to function in angularjs

angularjs

mapbox-gl