Question

正如您在图片中看到的，我绘制了多个zipcode多边形。在多边形上我选择了2个点，我正在计算距离。距离计算工作正常，但问题是距离条（黄色）在通过绘制的多边形时不会出现。

我正在使用此解决方案进行距离计算。 http://www.barattalo.it/examples/ruler.html

当我点击按钮添加标记时调用addruler（）函数，当我拖动标记以计算两点之间的距离时调用distance（）。

function addruler() {

    var ruler1 = new google.maps.Marker({
        position: map.getCenter() ,
        map: map,
        icon: distance_marker_image,
        draggable: true
    });


    var ruler2 = new google.maps.Marker({
        position: map.getCenter() ,
        map: map,
        icon: distance_marker_image,
        draggable: true
    });


    var ruler1label = new Label({ map: map });
    var ruler2label = new Label({ map: map });
    ruler1label.bindTo('position', ruler1, 'position');
    ruler2label.bindTo('position', ruler2, 'position');

    var rulerpoly = new google.maps.Polyline({
        path: [ruler1.position, ruler2.position] ,
        strokeColor: "#FFFF00",
        strokeOpacity: .7,
        strokeWeight: 7
    });

    rulerpoly.setMap(map);

    ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
    ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));


    google.maps.event.addListener(ruler1, 'drag', function() {
        rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
        ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
        ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
    });

    google.maps.event.addListener(ruler2, 'drag', function() {
        rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
        ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
        ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
    });
}


function distance(lat1,lon1,lat2,lon2) {
    var R = 3959; // km (change this constant to get miles. 3959 for m, 6371 for km also change 1000 to 1760)
    var dLat = (lat2-lat1) * Math.PI / 180;
    var dLon = (lon2-lon1) * Math.PI / 180;
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
    Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;
    if (d>1) return Math.round(d)+"miles";
    else if (d<=1) return Math.round(d*1760)+"yards";
        return d;
}

Answer 1

我现在找到了解决方案。刚刚将zIndex添加到下面的代码中。

var rulerpoly = new google.maps.Polyline({
        path: [ruler1.position, ruler2.position] ,
        strokeColor: "#FFFF00",
        strokeOpacity: .7,
        strokeWeight: 7,
        zIndex: 6
    });

距离标签位于谷歌地图中的zipcode多边形后面

1 个答案: