1. 獲取 google key
2. index 文件中 引入

<script src="http://www.google.cn/maps/api/js?key="></script>

3. vue.config.js 中配置 ( 適用于vue-cli3以后版本 )

 configureWebpack: config => {
        return {
            externals: {
                'google': 'google'
            }
        }
    }  

4. 相關(guān)組件中引入

import google from 'google'

5. 初始定義

        initMaps() {
            this.maps = new google.maps.Map(document.getElementById("allmap"), {
                zoom: 8,
                //設(shè)置地圖中心點(diǎn)
                center: { lng: 107.3951, lat: 34.491 },
                //為了關(guān)閉默認(rèn)控件集,設(shè)置地圖的disableDefaultUI的屬性為true
                disableDefaultUI: true,
                // 啟用縮放和平移
                gestureHandling: "greedy",
                // hybrid包含衛(wèi)星和地名
                mapTypeId: "hybrid",
                //語言可選值：en，zh_en, zh_cn
                language: "zh_cn"
            });
        }

加載

mounted() {
this.initMaps();
}

6. 添加多個標(biāo)記 / 彈窗

        addMarkers() {
            this.clearMarkers();
            this.markers.forEach(item => {
                let marker = new google.maps.Marker({
                    position: item.position,
                    map: this.map,
                    label: {
                        text: item.ame
                    }
                });
                let contentString = ` ${item.content} `;
                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
                //鼠標(biāo)覆蓋時顯示彈框，鼠標(biāo)移開隱藏彈框
                marker.addListener("mouseover", () => {
                    infowindow.open(this.maps, marker);
                });
                marker.addListener("mouseout", () => {
                    infowindow.close(this.maps, marker);
                });
                this.markers.push(marker);
            });
        },
        // 清除標(biāo)記
        clearMarkers() {
            for (var i = 0; i < this.markers.length; i++) {
                this.markers[i].setMap(null);
            }
            this.markers = [];
        },

8. 添加地圖是否加載完畢

            this.map.addListener("tilesloaded", () => {
                this.loading = false;
            });