Google地图自定义标记未在Vue中正确初始化

Question

我正在尝试将我的Googlemaps.js转换为vue组件，我目前有CustomMarker()的方法，然后在mounted()部分，你会看到更低的overlay = new CustomMarker(...)。

似乎这无法访问CustomMarker函数抛出以下错误：

app.js:5387 Uncaught ReferenceError: CustomMarker is not defined
    at initialize

如何正确初始化此功能？

GoogleMap.vue

<template>
    <div class="google-map" id="map"></div>
</template>

<script>
    export default {
        name: 'google-map',
        methods:{
            // Custom Overlay Marker
            CustomMarker(latlng, map, args) {
                this.latlng = latlng;
                this.args = args;
                this.setMap(map);
            },
        },
        mounted() {
            this.CustomMarker.prototype = new google.maps.OverlayView();

            this.CustomMarker.prototype.draw = function () {
                var self = this;
                var div = this.div;
                if (!div) {
                    div = this.div = document.createElement('div');
                    div.className = 'marker';
                    div.style.position = 'absolute';
                    div.style.cursor = 'pointer';
                    div.style.width = '37px';
                    div.style.height = '42px';
                    //      div.style.background = 'blue';

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

                    google.maps.event.addDomListener(div, "click", function (event) {
                        google.maps.event.trigger(self, "click");
                    });

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

                var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
                if (point) {
                    div.style.left = (point.x) + 'px';
                    div.style.top = (point.y - 38) + 'px';
                }
            };

            this.CustomMarker.prototype.remove = function () {
                if (this.div) {
                    this.div.parentNode.removeChild(this.div);
                    this.div = null;
                }
            };

            this.CustomMarker.prototype.getPosition = function () {
                return this.latlng;
            };


            //Instalize Map
            let map;

            function initialize() {
                const mapCanvas = document.getElementById('map');
                const myLatlng = new google.maps.LatLng(-62, 23);
                const mapOptions = {
                    zoom: 14,
                    backgroundColor: '#983336',
                    disableDefaultUI: true,
                    center: myLatlng,
                    draggable: false,
                    scrollwheel: false,
                    disableDoubleClickZoom: false,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }

                map = new google.maps.Map(mapCanvas, mapOptions);

                //  Custom Marker
               overlay = new CustomMarker(
                    myLatlng,
                    map,
                    {
                        marker_id: 'red-marker'
                    }
                );

                //  Style the map
                map.set('styles', [
                    {
                        "featureType": "landscape",
                        "stylers": [
                            { "visibility": "simplified" },
                            { "color": "#CD2D2B" }
                        ]
                    }
                ]);
            }
            google.maps.event.addDomListener(window, 'load', initialize);

            //Keep Centered on resize
            google.maps.event.addDomListener(window, "resize", function () {
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);
                //map.setDraggable(false);
            });
        }
    }
</script>

<style scoped>

</style>

更新27.02.19

地图现在加载，但是CustomMarker似乎没有出现this.CustomMarker.prototype部分的问题，因为它根本不会触发。

我也得到以下错误TypeError: this.map.setCenter is not a function

<script>
    export default {
        name: 'google-map',
        data() {
            return {
                map: null,
                overlay: null,
                center: { lat: -62, lng: 23 },
                mapStyle: [
                    {
                        "featureType": "landscape",
                        "stylers": [
                            { "visibility": "simplified" },
                            { "color": "#CD2D2B" }
                        ]
                    } 
                ],
            }
        },
        methods:{
            initializeMap() {
                const mapCanvas = document.getElementById('map');
                const myLatlng = new google.maps.LatLng(this.center);
                const mapOptions = {
                    zoom: 14,
                    backgroundColor: '#983336',
                    disableDefaultUI: true,
                    center: myLatlng,
                    draggable: false,
                    scrollwheel: false,
                    disableDoubleClickZoom: false,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }

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

                //  Custom Marker
                this.overlay = new this.CustomMarker(
                    myLatlng,
                    this.map,
                    { marker_id: 'red-marker' }
                );
                //  Style the map
                this.map.set('styles', this.mapStyle);
            },
            // Custom Overlay Marker
            CustomMarker(latlng, map, args) {
                this.latlng = latlng;
                this.args = args;
                this.map = map;
            }
        },
        async mounted() {
            //Instalize Map
            this.initializeMap()

            //NOTHING BELOW FOR CustomMarker SEEMS TO FIRE
            this.CustomMarker.prototype = new google.maps.OverlayView();
            this.CustomMarker.prototype.draw = function () {
                console.log('test') //DOES NOTHING
                const self = this;
                const div = this.div;
                console.log('div', div)
                if (!div) {
                    div = this.div = document.createElement('div');
                    div.className = 'marker';
                    div.style.position = 'absolute';
                    div.style.zIndex = '9999';
                    div.style.cursor = 'pointer';
                    div.style.width = '37px';
                    div.style.height = '42px';
                    div.style.background = 'blue';
                    if (typeof (self.args.marker_id) !== 'undefined') {
                        div.dataset.marker_id = self.args.marker_id;
                    }
                    google.maps.event.addDomListener(div, "click", function (event) {
                        google.maps.event.trigger(self, "click");
                    });
                    var panes = this.getPanes();
                    panes.overlayImage.appendChild(div);
                }
                var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
                if (point) {
                    div.style.left = (point.x) + 'px';
                    div.style.top = (point.y - 38) + 'px';
                }
            };
            this.CustomMarker.prototype.remove = function () {
                if (this.div) {
                    this.div.parentNode.removeChild(this.div);
                    this.div = null;
                }
            };
            this.CustomMarker.prototype.getPosition = function () {
                return this.latlng;
            };
            google.maps.event.addDomListener(window, 'load', this.initializeMap);
            //Keep Centered on resize
            google.maps.event.addDomListener(window, "resize", function () {
                // console.log(this.map)
                // var center = this.map.getCenter();
                google.maps.event.trigger(this.map, "resize");
                map.setCenter(this.center);
                //map.setDraggable(false);
            });
        }
    }
</script>

Answer 1

你是在全球某个地方定义CustomMarker吗？如果没有，你需要在你的Vue文件中使用import或require()。

edit

看起来像这一行：

overlay = new CustomMarker(

应该

overlay = new this.CustomMarker(

和

function initialize() {

应该

const initialize = () => {

否则，请在代码中显示哪一行失败。