1

我使用 Laravel，我在 vue 中有一个 Amcharts 地图，并且还有一个带有国家名称的 html 选择。如果我选择一个国家然后它会放大到地图上的国家，如果我点击地图上的一个国家，那么选定的名称也会出现在 html 选择中，如何解决这个问题？我可以用 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>

视图：

$( 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);
                     });
                }
           }
      },
 });

 });
4

1 回答 1

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/

于 2018-08-19T10:39:17.397 回答