更新：

Question

我使用Laravel，在Vue上有一张Amcharts的地图，并且还有一个带有国家名称的html select。如果我选择一个国家/地区，然后缩放到地图上的国家/地区，如果我单击地图上的一个国家/地区，则所选名称也出现在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", {});

然后在输入/选择项上添加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：所选值不会缩放到地图上的所选国家

1 个答案:

更新：