javascript - 谷歌地图信息窗口显示kml对象名称和链接

标签 javascript jquery google-maps kml

我有一些工作代码可以在 Google map 上显示 KML 图层。当您单击图层的各个部分时,它们各自的名称会在信息窗口中弹出。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
// Load Google Maps API
      src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=false">
    </script>
    <script type="text/javascript">



function initialize() {
  var myLatlng = new google.maps.LatLng(51.875696, -0.624207);
  var mapOptions = {
    zoom: 6,
    center: myLatlng
  };

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

  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://XXXXXXX.org/gliding/grid3.kml',
    suppressInfoWindows: false,
    map: map
  });

  google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
    var text = kmlEvent.featureData.name;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
  }
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas" style="width:100%; height:100%; float:left"></div>
    </body>
</html>

我希望信息窗口还包含一个指向与单击的对象同名的页面的链接。例如,如果用户单击 KML 图层中名为 Tom 的形状,则信息窗口会显示 Tom Click Here。如果用户单击该链接,他们将被带到 www.XYZ.com/Tom。

我确信这很简单,但我是 JavaScript 新手,无法让它工作。

最佳答案

这更像是一种黑客行为,而不是解决方案(这意味着谷歌可以更改属性名称,这将停止工作。

但是,给你

google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
    var text = kmlEvent.featureData.name;
    kmlEvent.featureData.infoWindowHtml += '<a href="' + kmlLayer.url + '">Click Here</a>';
    showInContentWindow(text);
});

关于javascript - 谷歌地图信息窗口显示kml对象名称和链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25411766/

相关文章:

iphone - 当用户给出终点和起点的经纬度时,如何获得该区域的业务?

javascript - 如何访问 D3 回调中的当前选择?

javascript - 如何在app引擎上用python实现 Stripe 自定义按钮

c# - 通过 AJAX MVC 下载 Excel 文件

JQuery val() 不适用于 Opera 中的文本区域

javascript - 通过 javascript 将复杂参数传递给 Web API 服务

javascript - 适合 View 并在 Google map 上显示用户位置以及所有其他标记

jquery - 通过纬度和经度按最近距离对地址列表进行排序

javascript - JS RegEx 删除 URL 的一部分?

javascript - 如何验证输入是否是javascript中的有效日期