可定制的交互式地图

Question

我有一个有点愚蠢的问题。我在创建自定义地图时遇到了麻烦（类似于您可以使用 Google 我的地图所做的事情），但具有以编程方式与之交互的额外功能。

我读到 google 我的地图没有 API 这让我的生活很困难。

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

如有任何帮助，我们将不胜感激。

亲切的问候，约尔杰

编辑：

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

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

Answer 1

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

答案是 Google 地图 javascript API + KML 图层，您可以从 Google 我的地图中获取。 KML 层内包含有关先前生成的自定义标记的信息。

为了交互和根据输入更改地图，您可以继续使用 Google 地图 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”。

可定制的交互式地图

Customizable and interactive map

javascript

maps

markers