问题描述
现在我正在使用 vuetify 和 vue js 在我的应用程序中实现地图功能。 我正在使用 vue2-google-maps 包来实现它，到目前为止它对我来说很好用。
现在我想更改图标的颜色，我正在使用以下网址更改图标的颜色“http://maps.google.com/mapfiles/ms/icons/orange-dot.png”
我的 HTML 代码如下所示
<gmap-map
:center="center"
:zoom="7"
style="width:50%; height: 400px;"
>
<gmap-marker
:key="index"
v-for="(m,index) in markers"
:position="m"
icon= "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
@click="center=m"
></gmap-marker>
</gmap-map>
现在不是将直接 url 传递给图标，我可以创建一个函数来检查某些条件并将每个条件的不同类型的颜色 url 返回到图标。如果可能的话，你能告诉我如何实现它
解决方法
您可以将不同图标的值放入数据中并创建一个空变量。这个空变量将作为您图标的值。
在我编写的代码中，我使用了单选按钮，每次我检查特定颜色的单选按钮时，这些单选按钮都会更改标记图标。为了解释，我使用了一个监听器（方法）来改变单选按钮。在这个方法中，我为 iconColor 值设置了 if else 条件。下面是一个 sample code 和代码片段：
<body>
<div id="root">
<form name="demo">
<label>
Orange
<input type="radio" value="orange" name="colors" @change="onChange($event)">
</label>
<label>
Yellow
<input type="radio" value="yellow" name="colors" @change="onChange($event)">
</label>
<label>
Blue
<input type="radio" value="blue" name="colors" @change="onChange($event)">
</label>
</form>
<google-map :center="center" :zoom="7" style="width: 100%; height: 500px">
<google-marker v-for="(m,key) in markers" :position="m.position" :icon=iconColor></google-marker>
</google-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="../dist/vue2-google-maps.js"></script>
<script>
Vue.use(VueGoogleMaps,{
load: {
key: ''
},// Demonstrating how we can customize the name of the components
installComponents: false,});
document.addEventListener('DOMContentLoaded',function() {
Vue.component('google-map',VueGoogleMaps.Map);
Vue.component('google-marker',VueGoogleMaps.Marker);
new Vue({
el: '#root',data: {
center: {
lat: 10.0,lng: 10.0
},orange: 'http://maps.google.com/mapfiles/kml/paddle/orange-circle.png',yellow: 'http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png',blue: 'http://maps.google.com/mapfiles/kml/paddle/blu-circle.png',markers: [{
position: {
lat: 11.0,lng: 11.0
}
}],iconColor: null
},methods: {
onChange(event) {
var optionText = event.target.value;
console.log(optionText);
if (optionText == "orange") {
this.iconColor = this.orange
} else if (optionText == "yellow") {
this.iconColor = this.yellow
} else {
this.iconColor = this.blue
}
}
}
});
});
</script>
</body>