Question

2个字段用于地图坐标（经度/纬度）如何绑定输入字段，当任何协调传入时，地图坐标将自动更新

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

请先重构您的代码。

<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 });
}`

Answer 2

在你的控制器中声明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 });
}

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

2 个答案: