Question

我正在创建一个有关城市徒步旅行的简单网页，其中包含一个Google Map，以显示每次旅行的不同路线。目的是让用户单击一个按钮，然后在更改按钮在地图上的标记和折线位置。

目前，我已经将地图平移到游览的正确位置，但是我正在努力寻找如何添加更多标记以及折线的方法。

到目前为止，我已经完成了以下操作：

var marker;
var map;

$("#gaudiTour").click(function() {
 changeMarkerPos(41.403706, 2.173504);
});

$("#gothicTour").click(function() {
 changeMarkerPos(41.3839, 2.1821);
});

function initMap() {
 var mapOptions = {
  center: new google.maps.LatLng(41.3851, 2.1734),
  zoom: 14
 };

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

 marker = new google.maps.Marker({
  position: new google.maps.LatLng(41.3839, 2.1821),
  animation: google.maps.Animation.DROP,
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
 });

 marker.setMap(map);
 map.panTo(marker.position);

}

function changeMarkerPos(lat, lon) {
 myLatLng = new google.maps.LatLng(lat, lon)
 marker.setPosition(myLatLng);
 map.panTo(myLatLng)
} 

// Polyline variable that I wish to add for each tour with different 
// coordinates.  

 var line = new google.maps.Polyline({
  path: [
   new google.maps.LatLng(41.403706, 2.173504),
   new google.maps.LatLng(41.4145, 2.1527)
  ],
  strokeColor: "#FFBD59",
  strokeOpacity: 1.0,
  strokeWeight: 5,
  map: map
 });

还要努力弄清楚如何在加载页面时使地图不显示中心标记。

我对JavaScript还是很陌生，因此希望获得任何帮助或建议！

如何使用点击功能更改Google Map的位置以显示多个标记和折线

0 个答案: