實施OverlayView的谷歌地圖ionic2/angular2

我嘗試在我的應用程序來實現自定義OverlayView的（https://developers.google.com/maps/documentation/javascript/examples/overlay-simple），我做我的課OverlayView的：實施OverlayView的谷歌地圖ionic2/angular2

import { Component } from '@angular/core';

出口類OverlayView的擴展google.maps.OverlayView {

latlng; 
args; 
div_; 

constructor(latlng, args, map){ 
    super(); 
    // Initialize all properties. 
    this.latlng = latlng; 
    this.args = args; 
    super.setMap(map); 

    // Define a property to hold the image's div. We'll 
    // actually create this div upon receipt of the onAdd() 
    // method so we'll leave it null for now. 
    this.div_ = null; 
} 

onAdd(){ 

    var div = this.div_; 
    var self = this; 
    if (!div) { 

     div = this.div_ = document.createElement('div'); 

     div.className = 'marker'; 

     div.style.position = 'absolute'; 
     div.style.cursor = 'pointer'; 
     div.style.width = '50px'; 
     div.style.height = '50px'; 
     div.style.background = 'blue'; 
     div.innerHTML = 'yolo<div style="background-color:red;width:10px;height:10px">tommy</div>'; 

     if (typeof(self.args.marker_id) !== 'undefined') { 
      div.dataset.marker_id = self.args.marker_id; 
     } 

     google.maps.event.addDomListener(div, "click", function(event) { 
      alert('You clicked on a custom marker!'); 
      google.maps.event.trigger(self, "click"); 
     }); 

     var panes = this.getPanes(); 
     panes.overlayLayer.appendChild(div); 
    } 

    //this.div_ = div; 

    // Add the element to the "overlayLayer" pane. 
    //var panes = this.getPanes(); 
    //panes.overlayLayer.appendChild(div); 
}; 


draw(){ 
    console.log("DRAWWWWWWWWWWWWW !!!"); 

    var div = this.div_; 
    var self = this; 
    if (!div) { 

     div = this.div_ = document.createElement('div'); 

     var point = this.getProjection().fromLatLngToDivPixel(this.latlng); 

     if (point) { 
      div.style.left = (point.x - 10) + 'px'; 
      div.style.top = (point.y - 20) + 'px'; 
     } 

    } 
}; 

// The onRemove() method will be called automatically from the API if 
// we ever set the overlay's map property to 'null'. 
onRemove(){ 
    if (this.div_) { 
     this.div_.parentNode.removeChild(this.div_); 
     this.div_ = null; 
    } 
}; 

getPosition(){ 
    return this.latlng; 
};

};

然後我初始化OverlayView的在我的頁面：

var myLatlng = new google.maps.LatLng(47.383333, 0.683333); 
this.overlay = new OverlayView(myLatlng, { marker_id: '123' }, this.map.map);

用好進口：

import { OverlayView } from '../../components/overlay-view/overlay-view.component';

但是我在我的頁面加載的時候，我在我的控制檯瀏覽器有： 未捕獲的ReferenceError：谷歌沒有定義（...） 爲的延伸「出口類OverlayView的擴展google.maps.OverlayView {」。我不知道我能做什麼，我首先遵循這一個（Angular2 - How to setup a google.maps.OverlayView? (translate JS prototype into Typescript)），我刪除

聲明常量谷歌：任何;

，因爲如果我讓他，離子給我：

typescript: J:/www/project/src/components/overlay-view/overlay-view.component.ts, line: 5 
     Type 'any' is not a constructor function type.

所以我很困惑。在此先感謝您的幫助。

來源

2016-12-04 Limmy

我建議你使用谷歌地圖的科爾多瓦插件（https://github.com/mapsplugin/cordova-plugin-googlemaps），因爲它提供了這樣的方式更好的性能（因爲它是天然的，它是由載體和呈現不是像那個JavaScript一樣的圖像）。這是非常非常定製..你可以在地圖上添加元素，等等。我用了一段時間，我非常滿意（包括Android和iOS）。 –

你如何導入谷歌地圖api？ –

這是我的朋友，誰做的谷歌地圖API的實現，他不以正確的方式做，落實已完成所有腳本的網頁上加載後，所以我不能有延伸。目前，我們很容易通過腳本應答器來實現api，以便在瀏覽器上進行測試，謝謝您的回答 – Limmy

有點晚了這裏，但我轉載此錯誤試圖完成同樣的事情（但對於一個普通Angular2應用程序使用CLI）。檢查this answer我給了你提到的同一篇文章。

來源

2017-03-11 09:34:27

實施OverlayView的谷歌地圖ionic2/angular2

回答

相關問題