◼️やりたいこと
現在、vue.jsとcordovaでgooglemapの読込、表示と
複数ピンのマッピングを行うコードを実装しております。
現在位置を取得し、当該地点に標準を合わせた上で、配列に入れている
位置情報データをマッピングしたい
◼️事象
「InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama」
とコンソールエラーが出てしまいマッピングができない状況でございます。
もしかすると、locationsの定義の仕方が間違っているかもしれませんが、
原因を明確にわかり兼ねております為、お力添えを頂けますと幸いです。
宜しくお願い致します。
<script> export default { data: function () { return { map: {}, position: {}, markers: [], // ロケーション(緯度・軽度)と、id、タイトルです。 locations: [ { location:{lat: 35.681, lng: 139.761}, id:1, title:"ラーメン屋1" }, { location:{lat: 35.682, lng: 139.762}, id:2, title:"ラーメン屋2" }, { location:{lat: 35.683, lng: 139.763}, id:3, title:"ラーメン屋3" }, { location:{lat: 35.684, lng: 139.764}, id:4, title:"ラーメン屋4" }, { location:{lat: 35.685, lng: 139.765}, id:5, title:"ラーメン屋5" } ] } }, watch: { position: function () { const map = this.$data.map const position = new google.maps.LatLng(this.$data.position.latitude, this.$data.position.longitude) const marker = new google.maps.Marker({ position, map }) map.panTo(position) } }, mounted () { const element = document.getElementById('map') const options = { zoom: 14, center: new google.maps.LatLng(32.750443,129.877561) } this.$data.map = new google.maps.Map(element, options); this.getCurrentPosition() //this.locations をループしてマーカー群を作成 this.markers = this.locations.map( function(data, i) { var marker = new google.maps.Marker({ position: data.location, map: map }); }); }, methods: { getCurrentPosition () { navigator.geolocation.getCurrentPosition(onSuccess, onError) const self = this function onSuccess(position) { self.$data.position = position.coords } function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n') } } } } </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。