时间戳

首页 > 解决方案 > 可定制的交互式地图

javascript - 可定制的交互式地图

问题描述

我有一个有点傻的问题。我在创建自定义地图时遇到了麻烦（类似于您可以使用 Google 我的地图执行的操作），但具有以编程方式与其交互的额外能力。

我读过谷歌我的地图没有 API，这让我的生活变得困难。

我需要根据用户输入更改地图位置和每个位置的标记。

任何帮助将不胜感激。

亲切的问候， Djordje

编辑：

我不需要任何人为我编写解决方案，只需要关于我可以使用哪个库来实现我的目标的信息。到目前为止，我已经尝试用谷歌搜索我的地图，添加标记并将其嵌入页面非常容易，但根据我从研究中收集到的信息，无法通过 API 与之交互。

我需要的是一个库，它允许我创建自定义标记，然后将地图的显示部分更改为所选城市。

标签： javascriptmapsmarkers

解决方案

我已经为任何需要和我做同样事情的人找到了答案。

答案是 Google maps javascript API + KML Layer，您可以从 Google My Maps 获得。在 KML 层内，可以找到有关先前生成的自定义标记的信息。

对于基于输入的交互性和更改地图，您可以继续使用 Google Maps Javascript API。

另外，请记住将 KML 文件托管在其他地方，以便 google api 可以访问它。

<style>
  #map{width:600px;height:600px}
</style>
<div id="map"></div>
<script>
let src = "https://host-host.com/webs.kml"
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 44.05588, lng: 21.03553}
  });

  var kmlLayer = new google.maps.KmlLayer({
    url: src,
    map: map
  });
}

</script>
<script src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&amp;callback=initMap">

并且记得在代码之后添加 google API 脚本，以便可以执行回调“initMap”。

推荐阅读