javascript - Google Maps API V3 读取 KML 文件-6ren

javascript - Google Maps API V3 读取 KML 文件

转载作者：行者123 更新时间：2023-11-30 18:27:22

我正在使用 KML Example 作为读取包含多边形的 KML 文件的指南。 kml文件包含

    <?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
  <name>Neighborhood Groups</name>
  <description><![CDATA[Content]]></description>
  <Style id="style3">
  </Style>
  <Style id="style9">
  </Style>
  <Style id="style8">
  </Style>
  <Style id="style2">
  </Style>
  <Style id="style4">
  </Style>
  <Style id="style7">
  </Style>
  <Style id="style1">
  </Style>
  <Style id="style5">
  </Style>
  <Style id="style6">
  </Style>
  <Style id="style10">
  </Style>
  <Placemark>
    <name>Neighborhood Group 1</name>
    <styleUrl>#style3</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.087296,35.911472,0.000000
            -84.089699,35.909248,0.000000
            -84.089439,35.903618,0.000000
            -84.085625,35.898994,0.000000
            -84.075836,35.903721,0.000000
            -84.081757,35.912968,0.000000
            -84.083565,35.919537,0.000000
            -84.090385,35.918110,0.000000
            -84.087250,35.911507,0.000000
            -84.090385,35.918110,0.000000
            -84.083473,35.919640,0.000000
            -84.087296,35.911472,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 2</name>
    <styleUrl>#style9</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.089439,35.902992,0.000000
            -84.089569,35.902992,0.000000
            -84.089615,35.902954,0.000000
            -84.093178,35.901428,0.000000
            -84.096741,35.900002,0.000000
            -84.097122,35.898819,0.000000
            -84.098969,35.897324,0.000000
            -84.112183,35.891346,0.000000
            -84.102013,35.885120,0.000000
            -84.089699,35.888771,0.000000
            -84.086739,35.892563,0.000000
            -84.082275,35.894367,0.000000
            -84.080429,35.894543,0.000000
            -84.087059,35.899845,0.000000
            -84.089401,35.903061,0.000000
            -84.089439,35.902992,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 3</name>
    <styleUrl>#style8</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.094109,35.910252,0.000000
            -84.094551,35.910252,0.000000
            -84.101067,35.909031,0.000000
            -84.096008,35.904068,0.000000
            -84.105103,35.901699,0.000000
            -84.104927,35.899651,0.000000
            -84.102867,35.895691,0.000000
            -84.097977,35.898022,0.000000
            -84.096992,35.899681,0.000000
            -84.095833,35.900730,0.000000
            -84.093681,35.906811,0.000000
            -84.094109,35.910252,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 4</name>
    <styleUrl>#style2</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.101196,35.908970,0.000000
            -84.101418,35.908901,0.000000
            -84.106911,35.907337,0.000000
            -84.113258,35.904381,0.000000
            -84.116608,35.903618,0.000000
            -84.116348,35.901497,0.000000
            -84.116905,35.899826,0.000000
            -84.116394,35.897915,0.000000
            -84.114418,35.893120,0.000000
            -84.111504,35.890961,0.000000
            -84.103905,35.896385,0.000000
            -84.104889,35.899548,0.000000
            -84.105324,35.900383,0.000000
            -84.100731,35.903755,0.000000
            -84.101196,35.908970,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 5</name>
    <Snippet>sdfgsdfg</Snippet>
    <description><![CDATA[<div dir="ltr">sdfgsdfg</div>]]></description>
    <styleUrl>#style4</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.094238,35.941559,0.000000
            -84.096649,35.944000,0.000000
            -84.100082,35.945660,0.000000
            -84.105621,35.945702,0.000000
            -84.111618,35.945660,0.000000
            -84.113251,35.943161,0.000000
            -84.113770,35.939030,0.000000
            -84.109177,35.940590,0.000000
            -84.110039,35.927589,0.000000
            -84.105789,35.925468,0.000000
            -84.094238,35.924358,0.000000
            -84.095360,35.930439,0.000000
            -84.094238,35.941559,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 6</name>
    <styleUrl>#style7</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.102272,35.946110,0.000000
            -84.101959,35.946110,0.000000
            -84.100342,35.945911,0.000000
            -84.096512,35.943981,0.000000
            -84.094070,35.941422,0.000000
            -84.094582,35.938961,0.000000
            -84.144463,35.913799,0.000000
            -84.094490,35.927872,0.000000
            -84.093773,35.924252,0.000000
            -84.090210,35.918522,0.000000
            -84.074852,35.921921,0.000000
            -84.079170,35.936520,0.000000
            -84.080971,35.941551,0.000000
            -84.081749,35.943130,0.000000
            -84.081413,35.945061,0.000000
            -84.082520,35.947472,0.000000
            -84.085609,35.949211,0.000000
            -84.092651,35.953411,0.000000
            -84.100029,35.949070,0.000000
            -84.102272,35.946110,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 7</name>
    <styleUrl>#style1</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.082008,35.944618,0.000000
            -84.081757,35.943512,0.000000
            -84.079140,35.936489,0.000000
            -84.079391,35.934158,0.000000
            -84.076088,35.921650,0.000000
            -84.059013,35.925400,0.000000
            -84.059097,35.928532,0.000000
            -84.062569,35.931278,0.000000
            -84.062920,35.932812,0.000000
            -84.060249,35.937119,0.000000
            -84.059608,35.939690,0.000000
            -84.060768,35.941841,0.000000
            -84.064552,35.943130,0.000000
            -84.074333,35.944691,0.000000
            -84.078712,35.945660,0.000000
            -84.082008,35.944618,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 8</name>
    <styleUrl>#style5</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.079613,35.913628,0.000000
            -84.074722,35.906986,0.000000
            -84.065323,35.911575,0.000000
            -84.063797,35.911873,0.000000
            -84.061096,35.912186,0.000000
            -84.062019,35.922176,0.000000
            -84.065582,35.923531,0.000000
            -84.077080,35.920891,0.000000
            -84.079315,35.914322,0.000000
            -84.079613,35.913628,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 9</name>
    <styleUrl>#style6</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.074425,35.906693,0.000000
            -84.074638,35.906605,0.000000
            -84.077042,35.905910,0.000000
            -84.072319,35.899166,0.000000
            -84.068626,35.894058,0.000000
            -84.067337,35.890911,0.000000
            -84.060234,35.892754,0.000000
            -84.056396,35.894283,0.000000
            -84.052963,35.894909,0.000000
            -84.055069,35.899513,0.000000
            -84.058434,35.899132,0.000000
            -84.060387,35.902954,0.000000
            -84.061722,35.905807,0.000000
            -84.064934,35.910309,0.000000
            -84.065582,35.911331,0.000000
            -84.074425,35.906693,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 17</name>
    <styleUrl>#style10</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.061737,35.913246,0.000000
            -84.061844,35.913002,0.000000
            -84.063606,35.911995,0.000000
            -84.063690,35.910950,0.000000
            -84.064682,35.910221,0.000000
            -84.061028,35.902817,0.000000
            -84.057938,35.898716,0.000000
            -84.052574,35.900906,0.000000
            -84.047256,35.904797,0.000000
            -84.048134,35.905632,0.000000
            -84.047424,35.906815,0.000000
            -84.047966,35.911194,0.000000
            -84.048264,35.912777,0.000000
            -84.050819,35.913334,0.000000
            -84.051201,35.914669,0.000000
            -84.052490,35.918163,0.000000
            -84.052490,35.921429,0.000000
            -84.057083,35.920597,0.000000
            -84.059204,35.918682,0.000000
            -84.061737,35.913246,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
</Document>
</kml>

处理它的javascript是

function initialize() {
  var myLatlng = new google.maps.LatLng(35.910200,-84.085100);
  var myOptions = {
    zoom: 12,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(
      document.getElementById("map_canvas"),
      myOptions);

  var nyLayer = new google.maps.KmlLayer(
      'map.kml',
      {  suppressInfoWindows: true,
         map: map});


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

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content_window');
    sidediv.innerHTML = text;
  }
}

正在进行的全部工作在 http://cspc.net/neighborhoods/map.html 。如您所见， map 不会完成加载。正在从在 maps.google.com 中创建的自定义 map 导出 kml 文件。

我需要修改 kml 文件吗？

最佳答案

问题出在 KmlLayer ^doc构造函数调用。您必须提供一个可公开访问的 URL，Google 可以从中检索您的 kml 文件。 Google 处理您的 kml，将其转换为叠加图 block ，然后将其作为您使用 new google.maps.KmlLayer(...) 创建的 KmlLayer 返回。

关于javascript - Google Maps API V3 读取 KML 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10501104/

文章推荐： c# - 如何检测windows phone是否插入了windows 7电脑？

文章推荐： c# - 如何用dapper解析Sql Script？ (设置 PARSEONLY ON + Dapper)

文章推荐：用于大字符串的 Javascript 语法高亮器

numpy - 为向量矩阵 v 计算 "v^T A v"
我有一个 k*n矩阵 X 和 k*k矩阵A。对于X的每一列，我想计算标量 X[:, i].T.dot(A).dot(X[:, i]) (或者，数学上， Xi' * A * Xi )。目前，我有一个
c - 无效*v[]； v[i] = v[j]；为什么这是对的？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
javascript - VueJS - 如何注册自定义元素、、、
我是 VueJS 的新手。我已经使用 vuetify/webpack-ssr 模板创建了一个项目，现在我想创建一个登录页面，但是没有显示表单，控制台给了我以下信息: [Vue warn]: Unkno
c++ - 是否保证 C++ vector v 的 v.begin() + v.size() == v.end()？
我尝试将 value 插入到 C++ vector v 之前的第 i 元素(或元素 (i-1) 之后) )。代码很简单 v.insert(v.begin() + i, value); 我确信当 i 介
c++ - vector v 的 v[0]、v.begin() 和 v.data() 之间有什么区别？
我需要显示使用合并排序算法排序的 vector 。然而，当我使用 v.begin() 时，我的 friend 使用 v.data() 来传递 vector 。他的代码运行良好，而我的却不行。请解释。
ffmpeg - 过滤图描述中的流说明符 ':v:0' [1 :v:0] [1:a:0] [2:v:0] [2:a:0] [3:v:0] [3:v:0] concat=n=4:v=1:a=1 [v] [a] matches no streams
这是我的命令(url1、url2、url3、url4 是占位符): ffmpeg -i url1 -i url2 -i url3 -i url4 -filter_complex “[1:v:0] [1
javascript - Vue : Use data to control DOM (but v-for, v-if、v-model 和 v-show 还不够)
我以前用过Vue，我知道怎么用v-for渲染元素序列，v-if或v-show有条件地显示元素，并且 v-model例如，控制段落的内容。但现在我需要对 DOM 进行更精细的控制: 我有一个range
rust - 为什么 &v[1] + &v[2] 与 Rust 中的 v[1] + v[2] 具有相同的结果？
我正在学习所有权和借用。 borrow1 和borrow2 的区别在于在borrow2 打印时使用了&: fn borrow1(v: &Vec) { println!("{}", &v[10]
vuejs2 - v-for 内部的 v-if 和 v-else 用于不同的文本渲染
我找不到一种方法来选择不同的选项来渲染 v-for 中的文本。是否有可能或者我是否需要以不同的方式构建逻辑来执行类似于下面的代码的操作？ // i
oop - 为什么 Seq[V] 不扩展 Map[Int,V] 也不 Set[V] 扩展 Map[V,Bool]？
Iterable 的三个直接子类型是 Map , Seq , 和 Set .除了性能问题之外，似乎还有一个 Seq是从整数到值的映射，以及 Set是从值到 bool 值的映射(如果值在集合中，则为 t
java - 为什么 v != null ？ v++ : 1 is not the same as (v ! = 空？ v : 0) + 1 on incrementing a key on HashMap. 计算？
我想应用一个计算方法，如果键存在则增加值，否则将 1。有 Map map = new HashMap<>(); 我不明白为什么 for (int i = 0; i v != null ? v++ :
c - IEEE 754 : is v *= -1 always guaranteed to be the same as v = -v?
标准(IEEE 754/C)是否保证以下代码断言永远不会失败？ int main() { for ( /* all possible float / double values */ )
javascript - v-for 在 v-if 条件下，v-else 不起作用，循环重复
代码由Vue语言编写，使用Element-ui框架，如果一个对象包含某些内容，则会显示该内容，如果不包含则禁用菜单按钮。输出应该是这样的: a、b(禁用)、c、d、e 但我的是这样的: a、a(禁
vue.js - v-for 与 v-if 处于同一级别，影响 v-else
如果我这样做: {‌{ morevalue }} {‌{ value }} v-else 中的跨度也会在第二个 V-FOR 上循环，即使它上面没有任何 v-for，为什么？这是
vue.js - v-for 与 v-if 处于同一级别，影响 v-else
如果我这样做: {‌{ morevalue }} {‌{ value }} v-else 中的跨度也会在第二个 V-FOR 上循环，即使它上面没有任何 v-for，为什么？这是
javascript - 如何在 v-datatable 中使用带有动态数组的 v-switches v-model
我将 Vue.js 与 Vuetify 一起使用，我正在尝试使用 v-data-table 从后端加载菜单列表并使用对其设置一些权限v-switches 但我在尝试 v-model 数组时遇到问题:
java - Map 在按值分组后返回到 Map>，而不是 Map>>
我在 Java 的流式操作中努力维护我想要的数据结构，这很可能是由于缺乏正确的理解和实践。 public class Main { public static void main(String
javascript - 是 incorrect? 我可以在同一元素的 v-bind 中使用来自 v-for 的匹配项吗？
我正在尝试为匹配中的每个匹配呈现一些 HTML，但是，我不太确定实际上是正确的。更具体地说，我不确定我是否可以使用 v-bind:match='match'在与循环相同的元素上 v-for='ma
vue.js - 带有选择选项的 V-IF 和 V-for 循环条件似乎永远不会进入 v-else 语句
所以我想知道为什么这个 v-if 和 v-else 语句不起作用，为什么我要以不同的方式解决它。代码如下 Required: Select a Workflow {{ isChain ?
vuejs2 - 防止 v-if、v-else、v-else-if 中的相同组件标签共享一个 Vue 实例
我有一个 VueJS 组件，我在同一个模板中使用了两次来显示两组不同的数据。每个都显示在自己的使用 v-if 切换的容器在导航选项卡上。似乎这些组件被实例化为同一个实例。我调用 console

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Google Maps API V3 读取 KML 文件