问题：

如何将kml文件中的图像显示在侧栏中的Google地图上

刘松

2023-03-14

在花了3天时间无法解决这个问题后，我正在编辑我的问题：我有一个西雅图所有楼梯的网站，当点击标记时，它会显示描述和图像。它已经运行了几年。（http://seattlestairs.home.comcast.net/~seattlestairs）

然后谷歌改变了他们kml文件的格式，如果我用新的kml替换旧的，我就看不到图像了。您可以在以下位置看到：(http://seattlestairs.home.comcast.net/~seattlestairs/index2。html）

但是，如果我只是将我的地图嵌入到网页中并单击标记，则会弹出信息窗口并显示图像和描述。

然而，我不喜欢这样，因为图像太小，看不到细节。我想要回我的侧边栏图片，希望有人能告诉我如何更改代码以实现这一点。（我只是个业余程序员）。这些评论建议使用解析器，我能够理解其中的要点，但我不能确切地知道如何做到这一点。

以下是旧kml文件中的placemark结构：

<Placemark>
    <name>#176 John St</name>
    <description><![CDATA[<div ><img style="width:400px" src="http://lh6.ggpht.com/_izunqcjpHto/TIx-yqN7PdI/AAAAAAAADXw/lt7xzoZ1ivI/s720/%23176%20side.jpg"><br>67 steps</div>]]></description>
    <styleUrl>#ordinary</styleUrl>
    <Point>
      <coordinates>-122.282104,47.618984,0.000000</coordinates>
    </Point>

这是在新kml文件中：

<Placemark>
                <styleUrl>#icon-ci-1</styleUrl>
                <name>#176 John St</name>
                <ExtendedData>
                    <Data name='gx_media_links'>
                        <value>http://lh6.ggpht.com/_izunqcjpHto/TIx-yqN7PdI/AAAAAAAADXw/lt7xzoZ1ivI/s720/%23176%20side.jpg</value>
                    </Data>
                </ExtendedData>
                <description><![CDATA[67 steps]]></description>
                <Point>
                    <coordinates>-122.282104,47.618984,0.0</coordinates>
                </Point>
        </Placemark>

我之前使用了一个示例java脚本来实现这一点，只是将“描述”放在infowindow中。现在有了新的kml文件，图像的源位于“扩展数据”中，我不知道访问该图像信息的正确方法。我可以得到名称和描述，但不能得到图像。

我的旧脚本是这样的：

   <script type="text/javascript">
     function initialize() {
       var latlng = new google.maps.LatLng(47.605, -122.333);
       var myOptions = {
         zoom: 12,
        center: latlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
        };
     var map = new google.maps.Map(document.getElementById("map_canvas"),
                               myOptions);
     var stairLayer = new    google.maps.KmlLayer('http://seattlestairs.home.comcast.net/~seattlestairs/SeattleStairs97.kml', 
     {preserveViewport: true, suppressInfoWindows:true});

 stairLayer.setMap(map);
  google.maps.event.addListener(stairLayer, 'click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    text = kmlEvent.featureData.name  + text;
    showInContentWindow(text);
  });
  function showInContentWindow(text) {
    var sidediv = document.getElementById('content_window');
    sidediv.innerHTML = text;
  } 
 }
</script>

那么“text=kmlEvent.featureData.description”在哪里呢？需要一些代码来获取图像的src，然后将其转换为html到sidediv中，但我不知道如何实现。

共有2个答案

边永贞

2023-03-14

这种方式适用于Chrome和Firefox和Safari，不能告诉IE：我通过删除“kml”标签和图标信息将谷歌地图中的kml文件更改为xml文件，我从W3在线教学中阅读了xml路径，然后修改了他们的示例。

所以，首先我使用Google地图事件功能来获取楼梯的名称。然后我加载了xml文件并使用“评估”函数来获取我的图像的来源（在kml文件中称为value）：

        <script>
var smoname = " ";
var smodev = " ";

// this will set up the google map in the right location
function initialize() {
  var myLatlng = new google.maps.LatLng(47.605, -122.333);
  var mapOptions = {
    zoom: 13,
    center: myLatlng
  };

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

//Here is the raw kml file as exported from google maps
  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://seattlestairs.home.comcast.net/~seattlestairs/newSeattleStairs.kml',
    suppressInfoWindows: true,
    map: map
  });

 google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {

//gets the name of the stairway when the icon is clicked
   smoname = kmlEvent.featureData.name;
   smodef = kmlEvent.featureData.description;

   smoin = smoname +"<br>"+ smodef;

 showInContentWindow(smoin);

//looks up the url of the image from the name 
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
try {xhttp.responseType="msxml-document"} catch(err) {} // Helping IE
xhttp.send("");
return xhttp;
}

var x=loadXMLDoc("AllSeattleStairs.xml");
var xml=x.responseXML;
path="/Document/Placemark[name= '" + smoname + "']/ExtendedData/Data/value";

// code for IE
if (window.ActiveXObject || xhttp.responseType=="msxml-document")
{
xml.setProperty("SelectionLanguage","XPath");
nodes=xml.selectNodes(path);
document.getElementById("showme").innerHTML = "<img width = 400px src =' " + nodes.childNodes[0].nodeValue + " ' ></src>";}

// code for Chrome, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result=nodes.iterateNext();

document.getElementById("showme").innerHTML = "<img width = 400px src =' " + result.childNodes[0].nodeValue + " ' ></src>";

}
      });

function showInContentWindow(smoin) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = smoin;  }
}
google.maps.event.addDomListener(window, 'load', initialize);

   </script>

朱雅惠

2023-03-14

KmlLayer（API参考）不允许您访问KML中的任何数据，除非单击。如果使用第三方KML解析器（如geoxml3或geoxml-v3），则可以使用KML中的任何信息，一个选项是使用第三方解析器（如geoxml3的KMZ分支），它允许您访问

var map;
var geoXmlDoc;

function initialize() {
   var latlng = new google.maps.LatLng(47.605, -122.333);
   var myOptions = {
     zoom: 12,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(document.getElementById("map_canvas"),
                               myOptions);

   var myParser = new geoXML3.parser({
                        map:map,
                        afterParse: useTheData,
                        suppressInfoWindows: true,
                        suppressDirections: true
                      });
   google.maps.event.addListenerOnce(map, 'idle', function() {
     for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
       var placemark = geoXmlDoc.placemarks[i];
       if (placemark.marker) {
         createClickableMarker(placemark);
       }
     }
   });
   myParser.parse("http://www.geocodezip.com/geoxml3_test/kml/newSeattleStairs.kml");
}
function showInContentWindow(text) {
  var sidediv = document.getElementById('content_window');
  sidediv.innerHTML = text;
} 

function createClickableMarker(placemark) {
 google.maps.event.addListener(placemark.marker,'click',function(e){
   var htmlString =placemark.name+"<br>"+placemark.description;
   var media_imgs = placemark.vars.val.gx_media_links.split(" ");
   for (var i=0; i < media_imgs.length; i++) {
     htmlString += "<br><img src='"+placemark.vars.val.gx_media_links+"' width='400'/>";
   }
   showInContentWindow(htmlString)
 });
}

function useTheData(doc){
  geoXmlDoc = doc[0];
};

google.maps.event.addDomListener(window, 'load', initialize);

概念证明（图标的单击目标似乎存在问题，但可以使其正常工作）。请注意，第三方解析器将KML渲染为本机Google Maps Javascript API v3对象，因此不会具有基于磁贴的KmlLayer渲染的性能。

类似资料：

如何在Jupyter Notebook中显示文件中的图像？

问题内容：我想使用IPython笔记本作为交互式分析我使用Biopython模块制作的一些基因组图的方法。尽管有大量有关如何在IPython笔记本中使用内联图形的文档，但GenomeDiagram使用ReportLab工具箱，我认为IPython不支持内联图形。但是，我当时想，一种解决方法是将绘图/基因组图写到文件中，然后打开图像内联图像，结果将是相同的，如下所示：但是，我不知道该怎么做-或
如何在GitHub上显示Markdown文件中的图像？

我想在GitHub上的一个Markdown文件中显示一些图像。我发现它是这样工作的：它可以在我的本地磁盘上工作，但不能在GitHub上工作。有人知道这个问题吗？
在web上显示本地图像文件

我正在开发一个推荐服装的网站。所以，我希望客户把他们的形象，这是在他们的地方。首先，我尝试了。但不提供自定义选项。我必须用我的照片显示按钮。因此，我尝试了按钮选项，并编写了这样的代码。 null null
如何在matplotlib的条形图中的栏上显示文本？

问题内容：我有一个条形图，我想在每一列上显示一些文本，该怎么办？问题答案：我相信这将为您指明正确的方向： http://matplotlib.sourceforge.net/examples/pylab_examples/barchart_demo.html。您最感兴趣的部分是：文本的位置由height函数或列的高度确定，并且放在每列顶部的数字由以下方式写：’％d’％int（height
将KMZ文件上载到我的谷歌地图中，并在Placemark描述中显示图像

我正在创建一个。KMZ文件，可以导入到我的谷歌地图中，我想在一些地名的描述中使用图像。KMZ格式只是一个压缩文件夹，其中包含具有结构的KML文件，然后是图像文件。问题是，我不知道是否/如何将KML中的图像文件链接到Google来解析和使用它们。目前我的结构如下：在main.kmz我链接到我的形象但这不起作用，我的地图不处理图像，我得到的只是一个黑色矩形。奇怪的是，如果我将同一个文件导入到Goo
图像在jar文件中不显示

我有一个netbeansjavagui项目。它包含用于图像的java文件和文件夹。我的项目中最重要的一部分是通过单击按钮来显示图像，比如说单击“下一步”按钮。当我点击“下一步”按钮时，图像将从IMG文件夹中逐个显示。我将图像放在标签中，如下所示：我运行了这个程序，到目前为止，它可以按照我的要求工作。然后，我需要将项目创建到一个jar文件中。我使用Netbeans和这个来创建我的项目的JAR文件

如何将kml文件中的图像显示在侧栏中的Google地图上

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档