如何更改 vue-google-maps 中的标记图标答案

【问题标题】：How to change marker icon in vue-google-maps如何更改 vue-google-maps 中的标记图标
【发布时间】：2016-12-25 07:35:53
【问题描述】：

我是 vuejs 的新手。我正在使用vue-google-maps 显示标记，我想知道如何更改标记图标。我试图将图标添加到标记标签，但它不起作用。在我的代码下面：

在我的模板中，我有：

<marker :position.sync="m.position" :icon.sync="m.icon" v-for="m in markers"></marker>

这是我的脚本：

export default {
 data: function data() {
  return {
   center: { lat: 33.533818415851705, lng: -3.746186887500016 },
   zoom: 7,
   markers: [{position: { lat: 34.263, lng: -6.582 }, icon:"../assets/marker-icon.png"}]
   };}};

有人可以指导我吗？

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

看看错误here。

骗here

document.addEventListener('DOMContentLoaded', function() {
	VueGoogleMap.load({
  	key: 'AIzaSyAF2ndm4PTn52sqO8E2NW3bAULQu2-IQaw'
  });

  Vue.component('marker', VueGoogleMap.Marker);
  Vue.component('map', VueGoogleMap.Map);

  var map = new Vue({
    el: '#map',
    data: {
      center: {
        lat: 41.6005450,
        lng: -93.609
      },
      markers: [{
        position: {
          lat: 41.585095,
          lng: -93.624523
        }
      }]
    },
  });
 });

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
  <script src="https://rawgit.com/GuillaumeLeclerc/vue-google-maps/master/dist/vue-google-maps.js"></script>
  <div id="map">
    <map :icon="{path:'M55.296 -56.375v40.32q0 1.8 -1.224 3.204t-3.096 2.178 -3.726 1.152 -3.474 0.378 -3.474 -0.378 -3.726 -1.152 -3.096 -2.178 -1.224 -3.204 1.224 -3.204 3.096 -2.178 3.726 -1.152 3.474 -0.378q3.78 0 6.912 1.404v-19.332l-27.648 8.532v25.524q0 1.8 -1.224 3.204t-3.096 2.178 -3.726 1.152 -3.474 0.378 -3.474 -0.378 -3.726 -1.152 -3.096 -2.178 -1.224 -3.204 1.224 -3.204 3.096 -2.178 3.726 -1.152 3.474 -0.378q3.78 0 6.912 1.404v-34.812q0 -1.116 0.684 -2.034t1.764 -1.278l29.952 -9.216q0.432 -0.144 1.008 -0.144 1.44 0 2.448 1.008t1.008 2.448z'}" style="height:500px;width:500px;display:block;" :center="center" :zoom="7">
      <marker v-for="m in markers" :position.sync="m.position" :clickable="true" :draggable="true" @g-click="center=m.center">
      </marker>
    </map>
  </div>
</body>

【讨论】：

感谢@Shaig 现在可以使用了。我刚刚编辑了这个：markers: [{position: { lat: 34.263, lng: -6.582 }, icon:"../assets/marker-icon.png"}] 到这个：[{position: { lat: 34.263, lng：-6.582 }，图标：{url : "../assets/marker-icon.png"} }].
我很高兴它帮助了@MariaMinh！

【解决方案2】：

我目前遇到这个错误，将图标位置分配给对象键 url 使其对我有用，就像上面的答案一样；

拥有;

{url: "../assets/marker-icon.png"}

【讨论】：