毎度お世話になります。
google map APIを題材に、JS及びVueの勉強をしております。
自分で考えてもどうしても実現できない機能がありますので、お力をお貸しいただけますと幸いです。
実現したいこと:Ajaxで定期的にDBから新規ユーザー情報を取得し、新規ユーザーが追加されたら、Google Mapにそのユーザーの場所をMarkerで表示し、ユーザー名、写真及び「プロフィール」ボタンを付与する。
「プロフィール」ボタンをクリックすると、ユーザーのプロフィールがalertで表示される。
利用している環境:Laravel6 Vue2 Google maps javascript API
現状のコード
<template> <div> <div class="map" ref="googleMap" /> </div> </template> <script> import { Loader } from '@googlemaps/js-api-loader'; export default { mounted() { const loader = new Loader({ apiKey: "MY API KEY", }); loader.load().then(() => { // googlemap生成処理 }); setInterval(this.download, 1000); }, methods:{ download:function(){ axios.get('/home/ajax/download').then((res)=>{ this.users = res.data; this.users.forEach(function( user ) { this.markers[user.id] = new google.maps.Marker({ position: {lat: user.latitude, lng: user.longitude}, map: this.map, title: user.name, }); this.markers[user.id].addListener("click", () => { var content = '<div>' +user.name+ '</div>' content += '<img src="' + user.imgpath + '">' content += '<button v-on:click="btn_profile(user.msg)">プロフィール</button>' new google.maps.InfoWindow({ content }).open(this.markers[user.id].getMap(), this.markers[user.id]); }); },this); }).catch(error => console.log(error)) }, btn_profile:function(msg){ alert(msg); } } } </script>
参考にした情報:過去の同種質問
現状のコードでうまくいかない理由は、上記参考情報を読むことで判明しております。(downloadメソッドに記述したv-on:clickのコンパイルが走らないため)
しかし、上記参考情報に倣ってあらかじめtemplateにv-forで箱を準備しようとしても、contentの内容(user.msg)自体がaxiosで不定期に飛んでくるため、どのような実装にしたらよいのか、イメージがわかずにいます。
どなたかお知恵を拝借できませんでしょうか。
どうぞ宜しくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。