Vue + Laravel + Amchart: 选中的值没有缩放到地图上选中的国家

Question

我使用 Laravel，我在 vue 中有一个 Amcharts 地图，还有一个带有国家名称的 html select。如果我 select 一个国家然后它缩放到地图上的国家并且如果我点击地图上的一个国家 selected 名称出现在 html select也是吗？我可以用 jquery （没有 vue）解决这个问题，添加这些行：

$('#select').on('change', function() {

    var id = this.value;

    if ( '' == id ) {
        map.clickMapObject(map.dataProvider);
    }
    else {
        map.clickMapObject(map.getObjectById(id));
    }
});

map.addListener("clickMapObject", function (event) {
    document.getElementById("select").value = event.mapObject.id;
});

但我想在 Vue 中做，但我不太明白应该怎么做。这是我的 index.html

<div id="titles">
 <div class="container map">
     <div class="row">

             <div class="col-md-9" id="mapdiv" style="width: 100%; height: 500px;"></div>
             <div class="col-md-3">
                 <div id="listed">
                     <ul >
                          <li v-for="task in filteredCountry">
                               @{{task.title}}         
                          </li>
                     </ul>
                 </div>
                 <select class="form-control" id="select" name="select" v-model="selectedCountry">
                     <option value="">Select a country</option>
                     <option  value="All" >All</option>
                     <option value="AF">Afghanistan</option>
                     <option value="AX">Åland Islands</option>
                         <!-- More countries -->
                  </select>
            </div>
         </div>
     </div>
  </div>

Vue:

$( document ).ready(function() { 

 const app = new Vue({
      el: '#titles',
      data: {
           tasks: {!! $tasks !!},
           selectedCountry: "All",
      },
      created() {
           AmCharts.makeChart( "mapdiv", {
               "type": "map",
               "zoomDuration": 0.1,
               "colorSteps": 100,

               "dataProvider": {
                   "map": "worldHigh", 
                   "getAreasFromMap": true,
                   "areas": <?php echo  '' . $countCountries . '' ?>
               },

               "areasSettings": {
                   "autoZoom": true,
                   "colorSolid": "#1B144B",
                   "selectedColor": "#1B144B",
                   "color": "#4DC5AC",
               },

               "valueLegend": {
                   "right": 100,
                   "minValue": "some",
                   "maxValue": "a lot!"
               }, 

           });
      },
      computed: {
           filteredCountry: function() {
                var app = this;
                var countries = app.selectedCountry;

                if(countries === "All") {
                     return app.tasks;
                } else {
                     return app.tasks.filter(function(task) {
                          return  (countries === 'All' || task.countries === countries);
                     });
                }
           }
      },
 });

 });

Answer 1

只需将地图分配给 Vue 组件上的一个变量：

this.map = AmCharts.makeChart( "mapdiv", {});

然后在您的 input/select 上您可以添加 v-on:change="" 属性。

<select v-on:change="onChange()" v-model="selectedCountry">
    <!-- Countries here... -->
</select>

然后在您的组件上添加一个名为 onChange:

的方法

methods: {
    onChange: function() {
        // Here do the logic about getting the mapObject you want
        // You probaby want to use `this.selectedCountry` from your select
        // and do something with the countries id.
        var mapObject = map.getObjectById(id);

        this.map.clickMapObject(mapObject);
    }
}

更新：

步骤：

this.map = AmCharts.makeChart( "mapdiv", { 已创建，以便您可以在外部访问。
var mapObject = this.map.getObjectById(id); 在 onChange
并且只是为了与数据对象中的数据 map: null, 保持一致。

https://jsfiddle.net/OzanKurt/4petgnau/22/

Vue + Laravel + Amchart: 选中的值没有缩放到地图上选中的国家

Vue + Laravel + Amchart: Selected value does not zoom to the selected country on the map

javascript

amcharts

laravel

ammap

vue.js

更新：