gpt4 book ai didi

javascript - 使用 2 种方法在 Google map 上显示标记和折线

转载 作者:行者123 更新时间:2023-11-28 09:43:15 24 4
gpt4 key购买 nike

我正在尝试结合两种不同的方法来在一张 map 上显示标记和折线。是否可以?如果是这样我该怎么做。或者相反,我如何将折线添加到我的标记样本中。

来自http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

如果没有我的实际代码,我很高兴这可能是一个浪费的帖子..但我在添加我的代码时遇到了麻烦..也许这应该是我的第一个问题..

最佳答案

此脚本将添加标记并在它们之间绘制多段线:

<script>

var poly;
var map;

function initialize() {
var chicago = new google.maps.LatLng(41.879535, -87.624333);
var mapOptions = {
zoom: 7,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);

// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}

/**
* Handles click events on a map, and adds a new point to the Polyline.
* @param {MouseEvent} mouseEvent
*/
function addLatLng(event) {

var path = poly.getPath();

// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);

// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}

</script>

这里有优秀的文档:

https://developers.google.com/maps/documentation/javascript/reference

https://google-developers.appspot.com/maps/documentation/javascript/examples/polyline-complex

关于javascript - 使用 2 种方法在 Google map 上显示标记和折线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12124481/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com