Question

当位置相同时在Google地图上放置标记。

使用Google地图显示客户的旅程。如果旅程是A-> B-> C，但A和C在同一位置，则C标记覆盖A标记，我需要它们聚类或添加某种标记填充，以便我们可以看到两个标记。

function initMap(){
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 7
  });

  directionsDisplay.setMap(map);
    calculateAndDisplayRoute(directionsService, directionsDisplay);
}





function calculateAndDisplayRoute(directionsService, directionsDisplay) {


    var waypts = [];
            var waypoints = $('#waypoints > li');
            for (var i = 0; i < waypoints.length; i++) {
              if( i == 0 || i == waypoints.length - 1){
                continue;
              }
              var temp = waypoints[i];
                waypts.push({
                  location: waypoints[i].innerHTML,
                  stopover: true
                });

            }


        directionsService.route({
                                    origin: $('#origin').text(),
                                    destination: $('#destination').text(),
                  waypoints: waypts,
                                    travelMode: google.maps.TravelMode.DRIVING
                                    }, function (response, status) {
                                    if (status === google.maps.DirectionsStatus.OK) {
                                        directionsDisplay.setDirections(response);
                                    }
                  else{
                            $("#map").html( "<img src='/images/error.png' id='maperror'/>" );
                                    }
                                });
}

function update_counts() {
    var url = base_url + '/ajax/FDM_global_booking/getcounts/';
  $.ajax({
        url:    url,
                    dataType: "text json",
                    data: { bookings_type: $('#current-filter-type').val() },
                    type: 'POST',
                    beforeSend: function(xhr){
                        xhr.setRequestHeader( 'agent_id', agentId );
                        xhr.setRequestHeader( 'account_ref', accountRef);
                        xhr.setRequestHeader( 'agent_token', agentToken );
                    },
                    success: function(data) {
                        // We are on the booking list page
                        if(data != '') {
              $('.left-panel').html(data);
                        }
                    }
    });
}

我想实现Google集群，但是经过测试后，它似乎并不能解决我的问题，而是创建了集群，然后在放大集群时保持不变，并且永远不会打开，因为标记仍在同一地方。

Answer 1

好吧，为了使Google API能够解决标记和位置问题，Ive必须创建自定义标记。我首先进行标记，以便有一个起始标记，一个通孔和一个结束标记。进行标记时，我发现Google标记以图片宽度居中。因此在做标记时，我确保所有三个图像的中心都相同。

中心是从黄色标记的中间获取的，导出绿色和红色标记时，我确保包括了三个标记的全部空间，这意味着中心始终是相同的，因此标记不会重叠并且躲起来

使用自定义标记的原因是因为我们使用Google地图绘制路线，接送，下车和跟踪驱动程序。有时旅程将是等待和返回，意味着工作的开始也是结束。并在Google地图上将C-B显示在原始帖子图像中。

这是生成的地图：

我已经设置了一个，但是我删除了Google密钥，只需添加您自己的或google dev密钥进行测试。
codepen <-click here

这是另一种情况，因为我不得不将代码实施到客户预订网站中，并且略有不同。
codepen <-click there

我希望这对某人有所帮助，因为这是使这一切正常进行的口号。

谷歌地图标记-相同的位置

1 个答案: