解决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 draw polyline between draggable markers

1 Answers
1

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

相关阅读排行

相关内容推荐

最新文章

请激活账号

ITKeyword

阿里云&腾讯云秒杀活动

解决google maps api v3 draw polyline between draggable markers

1 Answers 1

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

相关阅读排行

相关内容推荐

最新文章

请激活账号

ITKeyword

阿里云&腾讯云秒杀活动

1 Answers
1

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