1.通过webview引入map.html

<web-view :src="url"></web-view>

data() {
            return {
                url: "",
            }
        },

this.url = "/hybrid/html/map.html"

2.map.html

//首先接入谷歌地图api

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY"></script>

//在body里写入map

<div id="map"></div>

//在script里进行操作

window.onload = function() {
        getMap()
    };

function getMap() {
        // 获取当前时间毫秒数
        var timestamp = Date.parse(new Date());
        var map = '';
        var movelat = ''
        var movelog = ''

        
        var myStyles = [{//隐藏地图上的默认标记点
            featureType: "poi",
            elementType: "labels",
            stylers: [{
                visibility: "off"
            }]
        }, {//隐藏地图上建筑物的标记点
            featureType: "landscape.man_made",
            elementType: "labels.text",
            stylers: [{
                visibility: "off"
            }]
        } ];

        var marker = new google.maps.Marker({

            animation: google.maps.Animation.DROP

        });

        var infoWindow = new google.maps.InfoWindow();

        var pos;

        // The location of Uluru

        var uluru = {//默认经纬度

            lat: 35.6893557884111,

            lng: 139.73739173986635

        };

        // The map, centered at Uluru

        var map = new google.maps.Map(
            document.getElementById('map'), {

                zoom:17
                minZoom: 4,//最小缩放比
                disableDefaultUI: true, //去除地图上的小黄人
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: uluru,
                styles: myStyles,
            });

        // The marker, positioned at Uluru

     
        // Try HTML5 geolocation.

        if (navigator.geolocation) {

             //开启位置权限

            navigator.geolocation.getCurrentPosition(function(position) {

                    let lat = position.coords.latitude
                    let log = position.coords.longitude
                    movelat = lat
                    movelog = log
                    document.getElementById("lat").innerHTML = lat
                    document.getElementById("log").innerHTML = log
                    pos = {
                        lat: lat,
                        lng: log
                    };

                    marker = new google.maps.Marker({

                        position: pos,

                        map: map

                    });

                    map.setCenter(pos);

                },

                //未开启位置权限
                function() {
                    let lat = uluru.lat
                    let log = uluru.lng
                    movelat = lat
                    movelog = log
                    document.getElementById("lat").innerHTML = lat
                    document.getElementById("log").innerHTML = log
                    marker = new google.maps.Marker({

                        position: uluru,

                        map: map

                    });

                });

        } else {
            let lat = uluru.lat
            let log = uluru.lng
            movelat = lat
            movelog = log
            document.getElementById("lat").innerHTML = lat
            document.getElementById("log").innerHTML = log
            marker = new google.maps.Marker({

                position: uluru,

                map: map

            });
        }

        

    }