如何使用 Vue JS 更改 Google 地图标记的颜色

Question

现在我正在使用 vuetify 和 vue js 在我的应用程序中实现地图功能。我正在使用 vue2-google-maps 包来实现它，到目前为止它对我来说工作正常。

现在我想改变图标的颜色，我正在使用下面的url来改变图标“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>

现在我可以创建一个函数来检查特定条件和 return 不同类型的颜色 url 来检查图标的每个条件，而不是直接将 url 传递给图标。如果可能的话，你能告诉我如何实现吗

Answer 1

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

在我编写的代码中，我使用了单选按钮，每次我检查单选按钮的特定颜色时，这些单选按钮都会更改标记图标。为了解释，我使用了一个监听器（方法）来改变单选按钮。在此方法中，我为 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>

如何使用 Vue JS 更改 Google 地图标记的颜色

How to change the color of the Google Map marker using Vue JS

html

javascript

google-maps

vue.js

vue2-google-maps