Настройте размер всплывающего окна со встроенным изображением, чтобы оно соответствовало размеру окна в файле KML в Google Планета Земля. - PullRequest
Новая
       7

Настройте размер всплывающего окна со встроенным изображением, чтобы оно соответствовало размеру окна в файле KML в Google Планета Земля.

0 голосов
/ 03 марта 2020

Данный файл представляет собой KML файл с одной меткой и всплывающим баллоном, который можно открыть в GoogleEarth. Этот шар содержит изображение, которое больше, чем умещается на среднем экране. Мне бы хотелось, чтобы всплывающий шар динамически изменялся, чтобы (почти) использовать полный экран, независимо от физического размера экрана или разрешения. Внутри этого всплывающего окна изображение должно масштабироваться соответственно, чтобы быть полностью видимым без полос прокрутки.

Текущая ситуация: Current situation

Желаемая ситуация: Desired situation

Возможно ли это как-нибудь? Я пока не могу понять какую-либо комбинацию HTML / CSS, чтобы она заработала.

Это источник KML для верхнего снимка экрана: 

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
    <Document>
        <name>Two large images stacked vertically and adjusted to screen size in popup balloon</name>
        <Style id="abc123">
            <IconStyle>
                <color>000000</color>
                <scale>0.50</scale>
                <Icon>
                    <href>http://maps.google.com/mapfiles/kml/shapes/shaded_dot.png</href>
                </Icon>
            </IconStyle>
            <LabelStyle>
                <scale>0</scale>
            </LabelStyle>
        </Style>
        <Placemark>
            <name>Some placemark</name>
            <styleUrl>#abc123</styleUrl>
            <Point>
                <altitudeMode>clampToGround</altitudeMode>
                <coordinates>4.732276,52.604905</coordinates>
            </Point>
            <description><![CDATA[<img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" />]]></description>
        </Placemark>
    </Document>
</kml>

Ответы [ 2 ]

1 голос
/ 04 марта 2020

Как указано в другом ответе, вы можете изменить размер изображения на воздушном шаре с помощью инструментов basi c HTML. Вы также можете сделать это динамически, используя javascript, чтобы изменить размер изображения. Но вы, похоже, спрашиваете, можете ли вы настроить изображение и размер всплывающей подсказки в зависимости от размера экрана, и, к сожалению, я не знаю, каким образом HTML и Javascript в всплывающей подсказке могут узнать текущий размер экрана. есть, поэтому я не думаю, что можно динамически расширять изображение, чтобы заполнить экран.

Одной из возможных альтернатив может быть более мелкое (уменьшенное изображение?) Изображение в шарике, которое ссылается на полноразмерное изображение. Таким образом, пользователи могут щелкнуть изображение и открыть его во внутреннем окне браузера Земли, которое автоматически подгоняется к экрану.

0 голосов
/ 04 марта 2020

Описание метки может иметь HTML, поэтому одним из решений является установка атрибутов высоты и ширины в теге <img>, а другой подход - добавление тега <div> с шириной для управления шириной.

На приведенном ниже снимке экрана показано изображение во всплывающем окне при настройке пользовательской ширины.

image with custom width in Google Earth Pro

KML Пример: 

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
    <Document>
        <name>Two large images stacked vertically and adjusted to screen size in popup balloon</name>
        <Style id="abc123">
            <IconStyle>
                <color>000000</color>
                <scale>0.50</scale>
                <Icon>
                    <href>http://maps.google.com/mapfiles/kml/shapes/shaded_dot.png</href>
                </Icon>
            </IconStyle>
            <LabelStyle>
                <scale>0</scale>
            </LabelStyle>
        </Style>
        <Placemark>
            <name>Some placemark</name>
            <styleUrl>#abc123</styleUrl>
            <Point>
                <altitudeMode>clampToGround</altitudeMode>
                <coordinates>4.732276,52.604905</coordinates>
            </Point>
            <description><![CDATA[
                <img width="600" height="400"
                   src="https://www.w3schools.com/w3css/img_lights.jpg"/>
                ]]>
            </description>
        </Placemark>
    </Document>
</kml>

Второй подход - добавление тега <div> width на ширину. 

<description><![CDATA[
<div style="width:624px;">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg"/>
</div>
]]></description>
...