如何使用 Vue JS 更改谷歌地图标记的颜色答案

【问题标题】：How to change the color of the Google Map marker using Vue JS如何使用 Vue JS 更改谷歌地图标记的颜色
【发布时间】：2021-07-22 19:18:56
【问题描述】：

现在我正在使用 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 返回给图标。如果可能的话，你能告诉我如何实现它

【问题讨论】：

你好，也许这个链接可以帮助你：medium.com/free-code-camp/…

标签： javascript html vue.js google-maps vue2-google-maps

【解决方案1】：

您可以将不同图标的值放入数据中并创建一个为空的变量。这个空变量将是您的图标的值。

在我编写的代码中，我使用了单选按钮，每次我检查单选按钮的特定颜色时都会更改标记图标。为了解释，我使用了一个监听器（方法）来改变单选按钮。在此方法中，我将 if else 条件设置为 iconColor 值。下面是sample code 和代码 sn-p：

<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>

【讨论】：