2017-07-27 13 views
-1

私は単純なGoogleマップ上にいくつかのマーカーを取得しようとしています。イオンマップ付きのGoogleマップ上に複数のマーカー3

addMarkers(data, callback) { 
    var markers = [{ 
     'position': { 
      lat: 48.8513735, 
      lng: 2.3861292 
     }, 
     'icon': '#ff0000' 
     }]; 
    function onMarkerAdded(marker) { 
     console.log(marker); 
     markers.push(marker); 

     if (markers.length === data.length) { 
      callback(markers); 
     } else { 
      console.log('in the else'); 
     } 
    } 

    data.forEach(function(markerOptions) { 
     console.log('in foreach'); 
     this.map.addMarker(markerOptions, onMarkerAdded); 
    }); 
} 

マップ

import { Component, ViewChild, ElementRef } from '@angular/core'; 
import { GoogleMaps } from '@ionic-native/google-maps'; 

declare var google; 

export class SearchResultsPage extends BasePage { 

@ViewChild('map') mapElement: ElementRef; 
private map: any; 

constructor(public navCtrl: NavController, 
      public navParams: NavParams, 
      private translateService: TranslateService, 
      private googleMaps: GoogleMaps) {} 


    ionViewDidLoad() { 
    setTimeout(()=>{ 
     this.loadMap(); 
    }, 1000) 
    } 

    loadMap() { 
    let latLng = new google.maps.LatLng(48.8509695, 2.3861870000000636); 
    let latLng2 = new google.maps.LatLng(48.8504541, 2.3865487000000485); 

    let mapOptions = { 
     center: latLng, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);  

    var marker = new google.maps.Marker({  
     position: latLng, 
     map: this.map, 
     title: 'Hello World!' 
    },{ 
     position: latLng2, 
     map: this.map, 
     title: 'Check the World!' 
    }); 
} 

私はこれを見つけた(しかし、動作しません):私は、イオン性私はこのようなマップをロードしています。4.

角度使う3を使用しています表示されていますが、私はマーカーを追加することはできません。
私は公式の文書(v1とv2)に従おうとしましたが、動作しません。誰かがアイデアを持っているならば、進歩によって感謝します。私は同じことをしようとする多くの人を見ましたが、すべてのコードは異なります..

+0

問題は何ですか?地図が表示されないか、マーカーを追加できません。地図が表示されない場合は、マップを含むdivのスタイルを適切に設定していますか? – eNVy

+0

申し訳ありません私は私の質問を編集しました。地図は表示されていますが、マーカーを表示するのに成功することはできません –

+1

添付したコードにマーカーがロードされるものはありません。それを追加して、何が起こっているのかを見ることができます。 – eNVy

答えて

1
loadMap() { 
let latLng = new google.maps.LatLng(48.8513735, 2.3861292); 

let mapOptions = { 
    center: latLng, 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 

this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);  

var locations = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 
]; 

var infowindow = new google.maps.InfoWindow(); 

var marker, i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 
} 
} 
+0

あなたの答えをありがとう。それは完璧に動作しますが、別のマーカーを追加すると、そこにあるようには見えません。 2つのマーカーは同じ通りにあるはずです。私はコードを更新して、私がどのようにしたのかを示します。 –

+0

1回のコールで複数のマーカーを作成することはできません。複数のマーカーを作成するサンプルコードについては、この回答をご覧ください。それがあなたを助けてくれたら、答えとして私の答えを記入してください。ありがとう。 https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example – eNVy

+0

複数のマーカーを追加できるように回答を更新しました。 – eNVy

関連する問題