Vue + Laravel+Amchart:所选值不会缩放到地图上的所选国家/地区

Question

我使用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 中做到这一点，但我真的不明白应该怎么做。 这是我的索引.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

只需将 map 分配给 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/