Question

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

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

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

但是，我不喜欢这样，因为图片太小而无法看到细节。我想要我的侧边栏图像，并希望有人可以告诉我如何更改代码，以实现这一目标。（我只是一个业余程序员）。评论建议使用解析器，我能够得到它的要点，但我无法弄清楚到底是怎么做的。

以下是OLD kml文件中地标的结构：

<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脚本来执行此操作，只需输入＆＃34; description＆＃34;进入infowindow。现在使用新的kml文件，图像的来源是一个扩展数据＆＃34;而且我不知道访问该图像信息的正确方法。我可以得到名称和描述，但不能得到图像。

我的旧脚本看起来像这样：

   <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>

所以在哪里说＆＃34; text = kmlEvent.featureData.description＆＃34;需要有一些代码可以让我获得图像的src，然后将其放入html进入sidesiv，但我不知道如何。

Answer 1

KmlLayer（API Reference）不允许您访问KML中的任何数据，只需点击一下即可。如果您使用第三方KML解析器（如geoxml3或geoxml-v3），您可以使用您想要的任何KML信息一种选择是使用第三方解析器（如geoxml3的KMZ分支），它允许您访问KML中的<ExtendedData>。

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);

proof of concept（图标的点击目标似乎存在问题，但可以使其工作）。请注意，第三方解析器将KML呈现为本机Google Maps Javascript API v3对象，因此不具备基于磁贴的KmlLayer渲染的性能。

Answer 2

这种方式适用于Chrome和Firefox以及Safari，无法告诉IE：我将kml文件从谷歌地图改为xml文件，删除了＆＃34; kml＆＃34;标签和图标信息，我从W3在线教学中读到了xml路径，然后修改了他们的例子。

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

        <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>

如何将我的kml文件中的图像显示到侧边栏中的Google地图

2 个答案: