如何创建带标签的 Google 地图 API 折线图

Question

我使用 Google 地图 API 折线示例 https://developers.google.com/maps/documentation/javascript/examples/polyline-simple 来开发我的地图。

现在，我需要在地图中每一行的目的地端放置大约 8 个字符的文本，以指示目的地的名称。是否有捷径可寻？我希望看到有人只是将文本添加到上述示例的端点。

Answer 1

var marker = new google.maps.Marker({
   position: location,//{lat: xxx, lng: xxx}
   label: "88888888",//your text
   map: map//your map instance
});

只需这样做即可添加文本标签。

我做了一个例子codesandbox

Answer 2

第一个答案是一个好的开始，但它在行的每一端都放置了标记，我只希望最终目的地有一个带标签的标记。还不清楚如何在每一行放置不同的文本。

我使用了以下代码（添加了 Marker2 等：我在以下位置发布了一个示例：https://www.qsomap.org/QSOmapProduction/polytest.htm

    var marker1= new MarkerWithLabel({
    position: new google.maps.LatLng(37.999490,-87.400400),
    labelContent: "N9AAA",
    labelAnchor: new google.maps.Point(22, 0),
    labelClass: "labels",
    labelStyle: {opacity: 1.00},
    labelVisible: true,
    icon: '/images/red-dot.png',
    map: map,
    title: 'N9AAA'
    });

如何创建带标签的 Google 地图 API 折线图

How to create a Google Map API Polyline map with labels

api

dictionary

polyline