h5：googleMap谷歌地图的使用（ts，Maps Java

首先要用ts做，就得找到GoogleMap的类型定义
参考文档：https://www.npmjs.com/package/@types/googlemaps
官方文档：https://developers.google.com/maps/documentation/javascript/overview?hl=zh-cn

npm install --save @types/googlemaps

该软件包包含Google Maps JavaScript API的类型定义

接下来
1.创建dom

<div class="map" id="map"></div>
<ul class="address-list">
    <li v-for="(addr, addrindex) in addressList" :key="'addr' + addrindex" @click="chooseArea(addr)">
        <p class="title">{{ addr.province }}{{ addr.city }}{{ addr.county }}{{ addr.district }}</p>
        <p class="tips">{{ addr.address }}</p>
    </li>
</ul>

1.创建script标签

public loadGoogleMap() {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?language=zh&region=zh&callback=googleMapInit&key=你的key';
    document.head.appendChild(script);
}

2.定义了回调函数是googleMapInit，在调用的时候，给window

this.loadGoogleMap();
window['googleMapInit'] = this.initMap;

3.正式创建地图

public map: google.maps.Map | null = null;
private marker: google.maps.Marker | null = null;
private geocoder: google.maps.Geocoder | null = null;
private addressList: Array<any> = [];
// 中心坐标点
public coordinate =  [29.040037864868324, 129.56020164489746];
// 监听事件
private mapListener: google.maps.MapsEventListener | null = null;
private markerListenDrag: google.maps.MapsEventListener | null = null;
private markerListenClick: google.maps.MapsEventListener | null = null;
// 初始化地图
public initMap() {
    // 初始化
    this.map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: new google.maps.LatLng(this.coordinate[0], this.coordinate[1]),
        zoom: 10
    });
    // 地理编码
    this.geocoder = new google.maps.Geocoder();
    // 创建地址解析
    this.getMapPosition(this.map);
    // 创建标注
    this.marker = new google.maps.Marker({
        position: {
            lat: this.coordinate[0],
            lng: this.coordinate[1]
        },
        map: this.map
    });
    // 设置标注可拖拽
    this.marker?.setDraggable(true);
    // 监听标注拖拽
    if (this.marker) {
        this.markerListenDrag = this.marker.addListener('dragend', () => {
            const currLatlng = this.marker?.getPosition();
            if (this.geocoder && currLatlng) {
                this.geocoder.geocode(
                    {
                        location: currLatlng
                    },
                    (results, status) => {
                        this.pasrseAddress(results, status);
                    }
                );
            }
        });

        // 监听标注点击
        this.markerListenClick = this.marker.addListener('click', () => {
            const currLatlng = this.marker?.getPosition();
            if (this.geocoder && currLatlng) {
                this.geocoder.geocode(
                    {
                        location: currLatlng
                    },
                    (results, status) => {
                        this.pasrseAddress(results, status);
                    }
                );
            }
        });
    }
}
// 创建地址解析
private getMapPosition(map) {
    this.mapListener = map.addListener('click', event => {
        this.marker?.setPosition(event.latLng);
        this.geocoder?.geocode(
            {
                location: event.latLng
            },
            (results, status) => {
                this.pasrseAddress(results, status);
            }
        );
    });
}
// 得到选择列表
private pasrseAddress(results, status) {
    if (status == 'OK') {
        results = results.sort((x, y) => y.address_components.length - x.address_components.length);
        // console.log(results);
        const latlng = results[0].geometry.location;
        // console.log(latlng.lat(), latlng.lng());
        this.map?.setCenter(latlng);
        this.marker?.setPosition(latlng);
        const list: Array<any> = [];
        for (const item of results) {
            const obj: any = this.getAddressList(item);
            if (obj.city && obj.district) {
                list.push(obj);
            } else if (obj.city && obj.province) {
                list.push(obj);
            }
        }
        this.addressList = list;
    }
}
// 处理列表
public getAddressList(item) {
    const addressComponents = item.address_components;
    const latlng = item.geometry.location;
    const country = (addressComponents.find(x => (x.types || []).includes('country')) || {}).short_name || '';
    const info = {
        province: '', //  省
        city: '', //  市
        county: '', //  县
        district: '', //  区
        zipCode: '', //  邮编
        address: item.formatted_address || '',
        lat: latlng.lat().toString(),
        lng: latlng.lng().toString(),
        country
    };
    info.country = country;
    let district1: any = null;
    let district2: any = null;
    let district3: any = null;
    switch (country) {
        case 'TW':
            district1 = this.findList(addressComponents, 'administrative_area_level_1');
            district2 = this.findList(addressComponents, 'administrative_area_level_2');
            district3 = this.findList(addressComponents, 'administrative_area_level_3');
            info.city = district1.long_name || district2.long_name || '';
            info.district = district3.long_name || '';
            break;
        case ...
            break;
        default:
            break;
    }
    return info;
}
public findList(list, str) {
    let result: any = {};
    result = list.find(x => {
        if (x.types?.length > 0) {
            return x.types.includes(str);
        }
    });
    return result || {};
}
public destroyed() {
    this.removeGoogleMapScript();
}
/**
 * 解决重复加入script标签导致map报错
 * You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors
 * */
public removeGoogleMapScript() {
    // remove 监听
    if (this.markerListenDrag) {
        google.maps.event.clearListeners(this.markerListenDrag, 'dragend');
    }
    if (this.markerListenClick) {
        google.maps.event.clearListeners(this.markerListenClick, 'click');
    }
    if (this.mapListener) {
        google.maps.event.clearListeners(this.mapListener, 'click');
    }
    // remove maps.google的js
    const keywords = ['maps.googleapis'];
    //Remove google map scripts from DOM
    const scripts = document.head.getElementsByTagName('script');
    for (let i = scripts.length - 1; i >= 0; i--) {
        const scriptSource = scripts[i].getAttribute('src');
        if (scriptSource != null) {
            if (keywords.filter(item => scriptSource.includes(item)).length) {
                scripts[i].remove();
                if (scripts && scripts[i]) {
                    // scripts[i].parentNode.removeChild(scripts[i]);
                }
            }
        }
    }
    // 重置google
    window.google = undefined;
}

注意，eslint也许会检测到window.google未定义的错
那么需要定义一下

declare let window;
declare let google;

这样就创建完了地图，得到数据