vue-google-mapsのマーカーアイコンを変更するには

私はvuejsの初心者です。 vue-google-mapsを使用してマーカーを表示しています。どのようにマーカーアイコンを変更できますか？マーカータグにアイコンを追加しようとしましたが、動作しません。私のコードの下には：私のテンプレートで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"}] 
    };}};

誰かが私にしてください導くことはできますか？

出典

2016-08-18 Maria Minh

外観がバグ0です。

トリックhere

document.addEventListener('DOMContentLoaded', function() { 
 
\t VueGoogleMap.load({ 
 
    \t 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>

出典

2016-08-18 11:33:47

おかげでそれが機能するようになりました@Shaig。マーカー{{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を助けてくれてうれしいです！ –

vue-google-mapsのマーカーアイコンを変更するには

答えて

関連する問題