时间戳

首页 > 解决方案 > 如何将坐标标记添加到自定义（我的地点）地图？

google-maps - 如何将坐标标记添加到自定义（我的地点）地图？

问题描述

我有一个通过添加大量位置标记创建的自定义地图。这些是分支位置。

接下来，我创建了一个 excel 文件，用户可以在其中输入客户位置，然后将创建一个打开上述自定义地图的链接。现在它以客户位置为中心，但不显示标记。网址看起来像这样：

https://www.google.com/maps/d/viewer?mid=**mycustommap**-&hl=en&ll=22.9860302%2C-11.2430203&z=15

纬度/经度是我想在自定义地图上标记的坐标。

如何将带有这些坐标的标记添加到我的自定义（我的地点）地图中？

标签： google-mapsweb-applications

解决方案

一种选择是使用自定义 My Maps 地图中的“Exported KML”在Google Maps Javascript API v3 KmlLayer上呈现数据。然后将您的标记添加到它，正常的Google Maps Javascript API v3 方式。您必须在某处托管地图并处理查询字符串以获取坐标以加载标记。

大部分示例来自这个相关问题：Render a My Maps using Google Maps JavaScript API，标记代码除外。

代码片段：（来自此 MyMap的数据）

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var layer = new google.maps.KmlLayer({
    url: "http://www.google.com/maps/d/kml?mid=zNPjLbo835mE.k3TvWfqGG-AU",
    map: map
  });
  // Add a marker
  var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(32.735316, -117.149046),
    title: "My Marker"
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

推荐阅读