Vue中使用google map (china)

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. 相关组件中引入

import google from 'google'

5. 初始定义

        initMaps() {
            this.maps = new google.maps.Map(document.getElementById("allmap"), {
                zoom: 8,
                //设置地图中心点
                center: { lng: 107.3951, lat: 34.491 },
                //为了关闭默认控件集,设置地图的disableDefaultUI的属性为true
                disableDefaultUI: true,
                // 启用缩放和平移
                gestureHandling: "greedy",
                // hybrid包含卫星和地名
                mapTypeId: "hybrid",
                //语言可选值：en，zh_en, zh_cn
                language: "zh_cn"
            });
        }

加载

mounted() {
this.initMaps();
}

6. 添加多个标记 / 弹窗

        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
                });
                //鼠标覆盖时显示弹框，鼠标移开隐藏弹框
                marker.addListener("mouseover", () => {
                    infowindow.open(this.maps, marker);
                });
                marker.addListener("mouseout", () => {
                    infowindow.close(this.maps, marker);
                });
                this.markers.push(marker);
            });
        },
        // 清除标记
        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;
            });