ITKeyword,专注技术干货聚合推荐

注册 | 登录

解决google maps api v3 draw polyline between draggable markers

itPublisher 分享于

2021腾讯云限时秒杀,爆款1核2G云服务器298元/3年!(领取2860元代金券),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1062

2021阿里云最低价产品入口+领取代金券(老用户3折起),
入口地址https://www.aliyun.com/minisite/goods

推荐:Google Maps API V3

<html> <head>     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />     <script type="text/javascript" src="http://maps.google.co

I have multiple markers on google map v3. When map gets loaded it draws all marker and polyline. Initial path of the polyline would be same LatLng of each marker. When you drag marker it should draw the line between original LatLng to new position of the marker. You can move all and/or any markers on the map and each marker should have separate line showing marker's original LatLng to new position. I have done similar thing in below code but the problem is when I move marker it looses previous line of the marker. It always shows only one line of the dragged marker. How to solve this problem. Thanks in advance... Ash

<!DOCTYPE html>
<html>
<head>
    <title>Marker with line example two</title>
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_canvas {
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
    <script>
        var line;
        var myLatlng = new google.maps.LatLng(41.7833, 5.2167);
        var marker;
        var lines = [];
        function initialize() {
            var domain = [new google.maps.LatLng(11.2583, 75.1374)];
            var markers = [];

            var mapOptions = {
                zoom: 2,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                opacity: 0.2,
                disableDefaultUI: true,
                draggable: false
            };

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

            var lineCoordinates = [
              new google.maps.LatLng(53.215556, 56.949219),
              new google.maps.LatLng(75.797201, 125.003906),
              new google.maps.LatLng(37.7833, 144.9667),
              new google.maps.LatLng(-24.797201, 26.003906),
              new google.maps.LatLng(27.797201, -101.003906)
            ];

            for (i = 0; i < lineCoordinates.length; i++) {
                var latLng = lineCoordinates[i],
                    marker = new google.maps.Marker({
                        position: latLng,
                        draggable: true,
                        title: i.toString(),
                        map: map,
                    });
                markers.push({
                    key: i.toString(),
                    latLng: latLng
                });

                line = new google.maps.Polyline({
                    path: [latLng, latLng],
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    strokeColor: '#f00',
                    geodesic: true                    
                });
                line.setMap(map);

                lines.push(line);

                google.maps.event.addListener(marker, 'drag', function (event) {
                    var title = this.title,
                        result = $.grep(markers, function (e) { return e.key === title }),
                        oldLatLng = result[0].latLng,
                        newLatLng = new google.maps.LatLng(this.getPosition().lat(), this.getPosition().lng());

                    line.setPath([oldLatLng, newLatLng]);
                });

            } //end of for loop
        } //end of initialize function
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width: 1000px; height: 675px; margin-left: 400px; margin-top: 38px;"></div>
</body>
</html>
google-api maps draw polyline markers
|
  this question
edited Mar 5 '14 at 18:23 Anto Jurković 8,988 2 13 32 asked Mar 5 '14 at 15:57 Ash 8 4      did not get how lines.push(line); is working here. I am also trying to implement the same functionality. –  Piyush Arora Aug 20 '14 at 13:39

 | 

1 Answers
1

解决方法

You were almost there. You have to make closure for variable line for event listener:

        (function(line) {
            google.maps.event.addListener(marker, 'drag', function (event) {
                var title = this.title,
                    result = $.grep(markers, function (e) { return e.key === title }),
                    oldLatLng = result[0].latLng,
                    newLatLng = new google.maps.LatLng(this.getPosition().lat(), this.getPosition().lng());

                line.setPath([oldLatLng, newLatLng]);
            });
        })(line);

|
  this answer
answered Mar 5 '14 at 18:37 Anto Jurković 8,988 2 13 32      This is awesome, you are the man...This is working as I was expecting. Thanks a ton...-Ash –  Ash Mar 5 '14 at 19:02

 | 

推荐:Google Maps API V3 之 图层

Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 之控件 Google 地图 A


相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。