可自定义的交互式地图

问题描述

我有一个愚蠢的问题。我在创建自定义地图时遇到了麻烦（类似于您可以使用“ Google我的地图”进行的操作），但是还具有通过编程方式与其进行交互的附加功能。

我已经读过有关Google的地图，但我的地图没有API，这使我的生活变得困难。

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

任何帮助将不胜感激。

亲切的问候， 乔丹（Djordje）

编辑：

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

我需要一个可以让我创建自定义标记，然后将地图的显示部分更改为所选城市的图书馆。

解决方法

我找到了需要与我做同样事情的人的答案。

答案是Google地图javascript API + KML图层，您可以从Google我的地图中获取。在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”。