实现 OverlayView 谷歌地图 ionic2/angular2答案

【问题标题】：Implement OverlayView Google Maps ionic2/angular2实现 OverlayView 谷歌地图 ionic2/angular2
【发布时间】：2017-04-18 23:51:35
【问题描述】：

我尝试在我的应用中实现自定义 OverlayView (https://developers.google.com/maps/documentation/javascript/examples/overlay-simple)，我让我的班级 OverlayView：

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

export class OverlayView extends 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';

但是当我加载页面时，我的控制台浏览器中有： Uncaught ReferenceError: google is not defined(...) 对于“导出类 OverlayView 扩展 google.maps.OverlayView{”的扩展。我不知道我能做什么，我先关注这个（Angular2 - How to setup a google.maps.OverlayView? (translate JS prototype into Typescript)），我删除了

声明 const google: any;

因为如果我允许，离子送我：

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

所以我很困惑。提前感谢您的帮助。

【问题讨论】：

我建议你使用谷歌地图的cordova插件（github.com/mapsplugin/cordova-plugin-googlemaps），因为它提供了更好的性能（因为它是原生的，它是由矢量渲染的，而不是像javascript那样的图像） .它非常可定制..您可以在地图顶部添加元素等。我使用了一段时间，我很满意（android和iOS）。
你是如何导入谷歌地图 api 的？
是我的朋友做了google maps api的实现，他没有按照正确的方式做，实现是在页面上所有脚本加载后完成的，所以我不能延伸。目前我们用脚本应答器实现api非常简单，在浏览器上测试，谢谢你的回答

标签： google-maps class angular ionic2 extends

【解决方案1】：

这里有点晚了，但我重现了这个错误，试图完成同样的事情（但对于使用 CLI 的常规 Angular2 应用程序）。检查this我给你提到的同一个帖子的答案。

【讨论】：