javascript - 我已经实现了飞行模式的 map 路由，但无法在其上绘制标记？

Question

我已经实现了飞行模式的 map 路径路由，它工作正常，但现在我必须使用标签/指针图像对每个点实现标记，如何使用以下代码片段执行此操作:

function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 62.533457, lng: 155.799957},
          mapTypeId: 'terrain'
        });

        flightPathCoordinates = [
          {lat: 34.053184, lng: -118.289547},
          {lat: 19.089681, lng: 72.865486}, 
          {lat: 39.882300, lng: 116.289431},
          {lat: 56.199034, lng: 92.734745}                  
        ];         

        flightPath = new google.maps.Polyline({
          path: flightPathCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });            

        console.log(flightPath);
        flightPath.setMap(map);
}

google.maps.event.addDomListener(window, "load", initMap);

</script>

Answer 1

您必须先设置标记。获取数组中的所有地址以使其动态化。

$address = array("加尔各答","大吉岭","新+德里","斋浦尔", "比卡内尔","科拉奇","拉杰果德","孟买","果阿","曼加洛尔","高知","科伦坡","金奈","贡图尔","维萨卡帕特南","普里","迪格哈","加尔各答");

谷歌地图从此地址提取纬度。我想这会对你有所帮助。

function initMap(){
         var map;
              var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 0,
                mapTypeId: google.maps.MapTypeId.ROADMAP },
              function initialize() {
                map = new google.maps.Map(document.getElementById("map"), mapOptions);

                var userCoor = $.parseJSON('<?php echo json_encode($address_arr); ?>');
                var userCoorPath = new Array(userCoor.length);
                for(var j = 0; j < userCoor.length-1; j++){
                    userCoorPath[j] = new Array(new google.maps.LatLng(userCoor[j][1],userCoor[j][2]),new google.maps.LatLng(userCoor[j+1][1],userCoor[j+1][2]));
                    console.log(j);
                    var infowindow = new google.maps.InfoWindow();
                    var lineSymbol = {
                                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
                            };          
                            var userCoordinate = new google.maps.Polyline({
                            path: userCoorPath[j],
                            strokeColor: "#FF0000",
                            strokeOpacity: 1,
                            strokeWeight: 2,
                             icons: [{
                            icon: lineSymbol,
                            offset: '100%'
                            }]
                            });
                            userCoordinate.setMap(map);
                }

                var marker, i;
                var all_markers = new Array(userCoor.length);
                var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

                for (i = 0; i < userCoor.length; i++) {
                    console.log("inner loop->"+i);
                    if(userCoor[0][1] == userCoor[i][1] && userCoor[0][2] == userCoor[i][2])
                    {
                      marker = new google.maps.Marker({
                        position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]),
                        map: map,
                        label: 'A'
                      });
                    }else{
                      marker = new google.maps.Marker({
                        position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]),
                        map: map,
                        label: labels[i % labels.length]
                      });
                    }
                  all_markers[i] = marker;

                  google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                      infowindow.setContent(userCoor[i][0]);
                      infowindow.open(map, marker);
                    }
                  })(marker, i));

                }
                  var bound = new google.maps.LatLngBounds();

                for (var k in all_markers) {
                    bound.extend(all_markers[k].getPosition());
                }
                map.fitBounds(bound);

             }
              google.maps.event.addDomListener(window, 'load', initialize);
    }