1

我已经创建了谷歌地图并设置了坐标，当加载地图时，位置气泡的位置总是出现在中心。我想将它稍微向右/底部移动（应用填充）。怎么做？我附上图片来展示这个想法。

中心位置气泡

想将它向右/向下移动一点。

 function googlemap() {

        // map styling
        var styles = [
            {
                stylers: [
                 { hue: "#000000" },
                 { saturation: -100 },
                 { lightness: 40 }
                ]
            }, {
                elementType: "geometry",
                featureType: "road",
                featureType: "city",
                elementType: "labels",
                stylers: [
                  { visibility: "off" }
                ]
            }
        ];

        // google map coordinates
        var posY = 54.679687,
            posX = 25.277824,
            location = new google.maps.LatLng(posY, posX);

        var mapOptions = {
            panControl: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            draggable: true,
            disableDoubleClickZoom: false,
            scrollwheel: false,
            styles: styles,
            zoom: 5,
            center: location,            
            mapTypeId: google.maps.MapTypeId.ROADMAP // ROADMAP; SATELLITE; HYBRID; TERRAIN;
        };

        overlay.prototype = new google.maps.OverlayView();

        // create overlay marker
        overlay.prototype.onAdd = function () {

            blip = document.createElement('div'),
            pulse = document.createElement('div');
            blip.className = 'blip';
            pulse.className = 'pulse';

            // create tooltip
            tooltip = document.createElement('span');
            tooltip.className = 'tooltip';
            tooltip.innerHTML = 'Headquarters'; // tooltip text
            blip.appendChild(tooltip);

            // append 'blip' marker
            this.getPanes().overlayLayer.appendChild(blip).appendChild(pulse);
        }

        // update blip positioning when zoomed
        overlay.prototype.draw = function () {

            var overlayProjection = this.getProjection(),
                bounds = new google.maps.LatLngBounds(location, location),
                sw = overlayProjection.fromLatLngToDivPixel(bounds.getSouthWest()),
                ne = overlayProjection.fromLatLngToDivPixel(bounds.getNorthEast());

            blip.style.left = sw.x + 'px';
            blip.style.top = ne.y + 'px';


        };

        var map = new google.maps.Map(document.getElementsByClassName('map')[0], mapOptions);

        // explicitly call setMap on this overlay
        function overlay(map) {
            this.setMap(map);
        }

        // center map when window resizes
        google.maps.event.addDomListener(window, 'resize', function () { map.setCenter(location) });

        // center map when zoomed
        google.maps.event.addListener(map, 'zoom_changed', function () { map.setCenter(location) });

        // add overlay
        overlay = new overlay(map);
    }
4

0 回答 0