时间戳

首页 > 解决方案 > 如何添加网站用户可以添加图钉的地图

html - 如何添加网站用户可以添加图钉的地图

问题描述

我正在开发一个网站，我希望有一个所有用户都可以在其上固定位置的单一地图。所有用户都应该能够看到所有其他用户的固定位置。我还没有地图。

有哪些潜在的方法可以做到这一点？有一些我可以使用的 API 吗？如果是这样，我宁愿使用免费的（至少现在是这样）。如果这样的 API 不存在，我会接受会花费我的 API。

如果有任何重要信息需要您帮助我，请告诉我。

标签： html

解决方案

您可以为此使用谷歌地图。这里看看这个小提琴

每次单击鼠标时，您都可以将纬度和经度保存在数据库中，并在地图上绘制一个新标记。

首先，使用以下命令创建地图：

  var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 4,
       center: myLatlng
  });

然后对于存储在数据库中的每个纬度和经度，创建一个标记。

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
  });

对于每个地图点击事件，在地图上添加一个标记并将位置保存在数据库中。

map.addListener('click', function(event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    myLatlng = {lat: latitude, lng: longitude};
    // Save myLatlng in DB
    new google.maps.Marker({
      position: myLatlng,
      map: map
      })
  });

您可以在这里查看有关地图事件的更多信息

推荐阅读