未解決 --- gorde-map移動端 樣式為圓角移動過程中不生效
阿新 • • 發佈:2020-08-12
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; }