javascript - Vue + Laravel + Amchart:所选值不会缩放到地图上所选国家
问题描述
我使用 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);
});
}
}
},
});
});
解决方案
只需将地图分配给 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,
数据对象中的数据保持一致。
推荐阅读
- javascript - 什么时候需要创建 Number 对象?
- docker - Firefox 实例在 docker 容器内打开的实例不超过 5 个
- r - 使用 rvest 获取文本时如何保留换行符
- python - 为什么我会收到关于我已经定义的变量的错误消息?
- python - 如何在 Mac OSX 终端中更改主要 python 版本
- mysql - MySQL有条件地从数组中查询多对多关系(内部连接表)
- php - 用户名和密码字段无法正常工作
- html - 在 div 内打开一个反应选择下拉菜单正在推动同一个父级中的另一个 div
- javascript - 查找数组总和中的哪些数字以目标总和
- python-3.x - 防止运行脚本或禁用按钮 - tkinter