接入谷歌地图api

1.通过webview引入map.html

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

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

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

2.创建map的页面hybrid/html/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 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     

        var options = {
            enableHighAccuracy: true,
            timeout: 30,//30ms后调取手机定位
            maximumAge: 0
        };       

        //手机开启定位

        function success(position) {
            lat = position.coords.latitude
            log = position.coords.longitude
            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);
            getStores()

        }

  //手机关闭定位

        function error(err) {
            lat = uluru.lat
            log = uluru.lng
            document.getElementById("lat").innerHTML = lat
            document.getElementById("log").innerHTML = log
            marker = new google.maps.Marker({

                position: uluru,

                map: map

            });
            getStores()

        };
        navigator.geolocation.getCurrentPosition(success, error, options)

    }