zoukankan      html  css  js  c++  java
  • 未解决 --- gorde-map移动端 样式为圆角移动过程中不生效

    gorde-map移动端 样式为圆角移动过程中不生效

    外层container设置了圆角,里面的属性能设置的都设置了border-radius overflow:hidden,在移动的过程中,显示直角,移动后就显示圆角了,如图:

    如果有解决办法,欢迎留言交流!!!

    附上一个marker滚动效果
    gorde-map

    init函数中添加 text为传值
    gdeMap.addText(lng, lat, text);  
    
    addText: function(lng, lat, text){
        var content = `<div id="scroll_wrap"><div id="scroll_div" class="marker-text"><span id="scroll_begin">${text}</span><span id="scroll_end" style="display:none;"></span></div></div>`;
        var marker = new AMap.Marker({
            content: content,  // 自定义点标记覆盖物内容
            position:  [lng, lat], // 基点位置
            offset: new AMap.Pixel(0, -63) // 相对于基点的偏移位置,以 icon 的 [center bottom] 为原点
        });
        marker.setMap(gdeMap.map)
        // gdeMap.map.add(marker)
        gdeMap.map.on('complete', function() {
            if($("#scroll_begin").width() > 96){
                ScrollImgLeft();
                $("#scroll_end").css({"display": "inline-block"})
            }
        });
    }
    //文字横向滚动
    function ScrollImgLeft(){ 
        var speed = 50;
        var MyMar = null;
        var scroll_begin = document.getElementById("scroll_begin"); 
        var scroll_end = document.getElementById("scroll_end"); 
        var scroll_div = document.getElementById("scroll_div"); 
        scroll_end.innerText=scroll_begin.innerText; 
        function Marquee(){ 
            if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
            scroll_div.scrollLeft-=scroll_begin.offsetWidth; 
            else
            scroll_div.scrollLeft++; 
        } 
        MyMar=setInterval(Marquee,speed);
    }
    

    google-map

    <div id="content">
        <div id="scroll_div">
            <span id="scroll_begin">怪兽充电(壹健身国际游泳健身会所和乔丽晶店)</span><span id="scroll_end" style="display: none;"></span>
        </div>
    </div>
    
    init函数中添加
    if($('#scroll_begin') && $('#scroll_begin').text()){
        Popup = createPopupClass();
          popup = new Popup(
              new google.maps.LatLng({ lat: lat, lng: lng }),
              document.getElementById('content'));
          popup.setMap(googleMap.map);
      }
    
    function createPopupClass() {
            /**
             * A customized popup on the map.
             * @param {!google.maps.LatLng} position
             * @param {!Element} content The bubble div.
             * @constructor
             * @extends {google.maps.OverlayView}
             */
            function Popup(position, content) {
                this.position = position;
    
                content.classList.add('popup-bubble');
    
                // This zero-height div is positioned at the bottom of the bubble.
                var bubbleAnchor = document.createElement('div');
                bubbleAnchor.classList.add('popup-bubble-anchor');
                bubbleAnchor.appendChild(content);
    
                // This zero-height div is positioned at the bottom of the tip.
                this.containerDiv = document.createElement('div');
                this.containerDiv.classList.add('popup-container');
                this.containerDiv.appendChild(bubbleAnchor);
    
                // Optionally stop clicks, etc., from bubbling up to the map.
                google.maps.OverlayView.preventMapHitsAndGesturesFrom(this.containerDiv);
            }
            // ES5 magic to extend google.maps.OverlayView.
            Popup.prototype = Object.create(google.maps.OverlayView.prototype);
    
            /** Called when the popup is added to the map. */
            Popup.prototype.onAdd = function () {
                this.getPanes().floatPane.appendChild(this.containerDiv);
            };
    
            /** Called when the popup is removed from the map. */
            Popup.prototype.onRemove = function () {
                if (this.containerDiv.parentElement) {
                    this.containerDiv.parentElement.removeChild(this.containerDiv);
                }
            };
    
            /** Called each frame when the popup needs to draw itself. */
            Popup.prototype.draw = function () {
                var divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
    
                // Hide the popup when it is far out of view.
                var display =
                    Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000 ?
                        'block' :
                        'none';
    
                if (display === 'block') {
                    this.containerDiv.style.left = divPosition.x + 'px';
                    this.containerDiv.style.top = divPosition.y + 'px';
                }
                if (this.containerDiv.style.display !== display) {
                    this.containerDiv.style.display = display;
                }
            };
    
            return Popup;
        }
    
  • 相关阅读:
    hdu 1083 Courses
    hdu 1068 Girls and Boys
    hdu 2988 Dark roads
    hdu 1879 继续畅通工程
    hdu 1875 畅通工程再续
    hdu 1233 还是畅通工程
    hdu 4040 (贪心算法)
    FZU 2111 Min Number
    Reconstructing Cloud-Contaminated Multispectral Images With Contextualized Autoencoder Neural Networks(自编码机重建云污染区)
    跑深度学习网络遇到的一些错误总结
  • 原文地址:https://www.cnblogs.com/lisaShare/p/13492160.html
Copyright © 2011-2022 走看看