Question

我在javascript和Vue.js中使用谷歌地图API V3为我的应用程序，我发现了一个奇怪的错误，当我第一次点击在地图上放置标记时，网络应用程序冻结了1-3seconds。这是我的代码：

var vueMap = new Vue({
    el: '#map-canvas',
    data: {
        infowindow: new google.maps.InfoWindow(
            {
                size: new google.maps.Size(150,50)
            }),
        marker: null
    },
    ready:function(){
        this.initialize();
    },
    methods: {
        createMarker: function (latlng, name, html, point1, map) {
            var distanceKm = google.maps.geometry.spherical.computeDistanceBetween(point1, latlng);
            distanceKm = distanceKm/1000;
            distanceKm = distanceKm.toFixed(2);
            var contentString = "Distance en KM  ---- " + distanceKm + '<br/>Score de 123';
// HERE IS WHERE THE FROZE HAPPEN
            this.marker = new google.maps.Marker({
                position: latlng,
                map: map,
                zIndex: Math.round(latlng.lat()*-100000)<<5
            });
            // TODO onclick
            google.maps.event.addListener(this.marker, 'click', function() {
                this.infowindow.setContent(contentString);
                this.infowindow.open(map,this.marker);
            }.bind(this));
            google.maps.event.trigger(this.marker, 'click');
            return this.marker;
        },
        initialize:  function () {
            var styles = [/*some style*/];
            var styledMap = new google.maps.StyledMapType(styles,
                {name: "Styled Map"});
            var bounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(48.815145,2.244830),
                new google.maps.LatLng(48.902137, 2.417864)
            );

            var point1 = new google.maps.LatLng(48.858230, 2.372566);
            var center = bounds.getCenter();
        var x = bounds.contains(center);
        var mapOptions = {
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
            },
            center: center,
            zoom: 1,
            minZoom: 13,
            streetViewControl: false,
            mapTypeControl: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.RIGHT_CENTER
            },
            panControl: true,
            panControlOptions: {
                position: google.maps.ControlPosition.RIGHT_CENTER
            }
        };

        console.log(document.getElementById('map-canvas'));
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        var lastValidCenter = map.getCenter();
        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');
        google.maps.event.addListener(map, 'center_changed', function() {
                if (bounds.contains(map.getCenter())) {
                    // still within valid bounds, so save the last valid position
                    lastValidCenter = map.getCenter();
                    return;
                }
                // not valid anymore => return to last valid position
                map.panTo(lastValidCenter);
            });
            google.maps.event.addListener(map, 'click', function(event) {
                //call function to create marker
                if (this.marker != null) {
                    this.marker.setMap(null);
                    this.marker = null;
                }
                this.marker = vueMap.createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng, point1, map);
            }.bind(this));
        }
    }
});
module.exports = vueMap;

Chrome浏览器比使用Firefox和Safari更长... 有人知道为什么吗？（或者有一个关于它的线索？）提前致谢

首先在谷歌地图上创建标记花费太多时间

0 个答案: