如何将所有标记与 Google 地图中的路径连接起来?

发布于 2024-12-11 13:45:32 字数 1044 浏览 0 评论 0原文

我是 Google 地图(API)新手,我需要获得以下结果:

paths

目前,我知道如何渲染地图并在其上放置标记(基于经度和纬度)。

var map;

map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 7,
    center: new google.maps.LatLng(response[0].latitude, response[0].longitude),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

for (var i = 0; i < response.length; ++i) {

    new google.maps.Marker({
        'map' : map,
        'position' : new google.maps.LatLng(response[i].latitude, response[i].longitude),
        'title' : response[i].address
    });

}

变量response结构如下:

[
Object
address: "Krišjāņa Barona iela 25, Riga, LV-1011, Latvia"
latitude: "24.1245290"
longitude: "56.9528510"
__proto__: Object
, 
Object
address: "Rīgas iela 1, Tukums, Tukuma novads, LV-3101, Latvia"
latitude: "23.1630590"
longitude: "56.9663880"
__proto__: Object
]

可能有很多标记。我正在寻找一种将标记与预览图像中的路径连接起来的方法。

我不知道我应该搜索什么,我需要你们的帮助,伙计们。谢谢指教!

I'm new to Google Maps (API) and I need to get the following result:

paths

At the moment, I know how to render the map and place markers on it (based on longitude and latitude).

var map;

map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 7,
    center: new google.maps.LatLng(response[0].latitude, response[0].longitude),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

for (var i = 0; i < response.length; ++i) {

    new google.maps.Marker({
        'map' : map,
        'position' : new google.maps.LatLng(response[i].latitude, response[i].longitude),
        'title' : response[i].address
    });

}

Variable response structure is like:

[
Object
address: "Krišjāņa Barona iela 25, Riga, LV-1011, Latvia"
latitude: "24.1245290"
longitude: "56.9528510"
__proto__: Object
, 
Object
address: "Rīgas iela 1, Tukums, Tukuma novads, LV-3101, Latvia"
latitude: "23.1630590"
longitude: "56.9663880"
__proto__: Object
]

There could be a lot of markers. I'm looking for a way to join markers with paths like in the preview image.

I don't know for what I should search and I need your help in this, guys. Thanks in an advice!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

能否归途做我良人 2024-12-18 13:45:32

Google 教程中的示例:

  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

另请参阅折线的参考条目。

如果您不知道如何将响应对象映射到 LatLng 对象数组,请参阅以下示例:

var flightPath = responseArray.map(function (item) {
    return new google.maps.LatLng(item.latitude, item.longitude);
});

An example from Google's tutorial:

  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

Also, see the reference entry for Polylines.

If you don't know how to map the response object to an array of LatLng objects, here's an example:

var flightPath = responseArray.map(function (item) {
    return new google.maps.LatLng(item.latitude, item.longitude);
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文