与标签在javascript中的多义线 [英] polyline with label in javascript

问题描述

这是我用来添加多段线的代码，但是我想在点击多段线时添加一个标签。当我点击多段线时，它会显示一个标签。

 < script> 
 var x = new google.maps.LatLng（52.395715,4.888916）; 
 var stavanger = new google.maps.LatLng（58.983991,5.734863）; 
 var amsterdam = new google.maps.LatLng（52.395715,4.888916）; 
 var london = new google.maps.LatLng（51.508742，-0.120850）; 
 
函数initialize（）
 {
 var mapProp = {
 center：x，
 zoom：4，
 mapTypeId：google.maps .MapTypeId.ROADMAP 
}; 
 
 var map = new google.maps.Map（document.getElementById（googleMap），mapProp）; 
 
 var myTrip = [斯塔万格，阿姆斯特丹，伦敦]; 
 var flightPath = new google.maps.Polyline（{
 path：myTrip，
 strokeColor：＃0000FF，
 strokeOpacity：0.8，
 strokeWeight：2 
}）; 
 
 flightPath.setMap（map）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
< / head> 
 
< body> 
< div id =googleMapstyle =width：500px; height：380px;>< / div> 
< / body> 
< / html> 
  

可以帮助我添加标签。

我链接到的文章。它在您点击的位置显示标签。

 <！DOCTYPE html> 
< html> 
< head> 
< title>带有标签的Polyline点击< / title> 
 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/> 
< style type =text / css> 
 html {height：100％} 
 body {height：100％;保证金：0; padding：0} 
 #map_canvas {height：100％} 
< / style> 
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js>< / script> 
< script> 
 //定义叠加层，从google.maps.OverlayView派生
函数Label（opt_options）{
 //初始化
 this.setValues（opt_options）; 
 
 //特定标签
 var span = this.span_ = document.createElement（'span'）; 
 span.style.cssText ='position：relative;剩下：-50％;顶部：-8px; '+ 
'空格：nowrap;边框：1px纯蓝色; '+ 
'padding：2px;背景颜色：白色'; 
 
 var div = this.div_ = document.createElement（'div'）; 
 div.appendChild（span）; 
 div.style.cssText ='position：absolute; display：none'; 
} 
 Label.prototype = new google.maps.OverlayView（）; 
 
 //实现onAdd 
 Label.prototype.onAdd = function（）{
 var pane = this.getPanes（）。floatPane; 
 pane.appendChild（this.div_）; 
 
 //如果文本或位置发生更改，确保标签重新绘制。 
 var me = this; 
 this.listeners_ = [
 google.maps.event.addListener（this，'position_changed'，
 function（）{me.draw（）;}），
 google。 maps.event.addListener（this，'text_changed'，
 function（）{me.draw（）;}）
]; 
}; 
 
 //实现onRemove 
 Label.prototype.onRemove = function（）{
 var i，I; 
 this.div_.parentNode.removeChild（this.div_）; 
 
 //将标签从地图上移除，停止更新其位置/文本。 
 for（i = 0，I = this.listeners_.length; i< I; ++ i）{
 google.maps.event.removeListener（this.listeners_ [i]）; 
} 
}; 
 
 //实现draw 
 Label.prototype.draw = function（）{
 var projection = this.getProjection（）; 
 var position = projection.fromLatLngToDivPixel（this.get（'position'））; 
 
 var div = this.div_; 
 div.style.left = position.x +'px'; 
 div.style.top = position.y +'px'; 
 div.style.display ='block'; 
 
 this.span_.innerHTML = this.get（'text'）。toString（）; 
}; 
 
函数initialize（）{
 var stavanger = new google.maps.LatLng（58.983991,5.734863）; 
 var amsterdam = new google.maps.LatLng（52.395715,4.888916）; 
 var london = new google.maps.LatLng（51.508742，-0.120850）; 
 
 var map = new google.maps.Map（document.getElementById（map_canvas），{
 zoom：5，
 center：new google.maps.LatLng（52.395715 ，4.888916），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 
 var myTrip = [斯塔万格，阿姆斯特丹，伦敦]; 
 
 var flightPath = new google.maps.Polyline（{
 path：myTrip，
 strokeColor：＃0000FF，
 strokeOpacity：0.8，
 strokeWeight：2，
 map：map 
}）; 
 
 //创建一个隐形标记
 labelMarker = new google.maps.Marker（{
 position：stavanger，
 map：map，
 visible：假
}）; 
 
 var myLabel = new Label（）; 
 
 //让我们添加一个事件侦听器，如果你点击这一行，我会告诉你你点击的坐标
 flightPath.addListener（'click'，function（e）{
 labelMarker.setPosition（e.latLng）
 myLabel.bindTo（'position'，labelMarker，'position'）; 
 myLabel.set（'text'，e.latLng.toString（））; 
 myLabel.setMap（map）; 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
< / head> 
< body> 
< div id =map_canvas>< / div> 
< / body> 
< / html> 
  

This is my code which is used to add a polyline ,but i want to add a label on click on polyline.When i click on the polyline,it shows a label .

      <script>
        var x=new google.maps.LatLng(52.395715,4.888916);
        var stavanger=new google.maps.LatLng(58.983991,5.734863);
      var amsterdam=new google.maps.LatLng(52.395715,4.888916);
           var london=new google.maps.LatLng(51.508742,-0.120850);

          function initialize()
            {
             var mapProp = {
                center:x,
                zoom:4,
              mapTypeId:google.maps.MapTypeId.ROADMAP
              };

                  var map=new                            google.maps.Map(document.getElementById("googleMap"),mapProp);

               var myTrip=[stavanger,amsterdam,london];
                     var flightPath=new google.maps.Polyline({
                    path:myTrip,
                  strokeColor:"#0000FF",
                   strokeOpacity:0.8,
                  strokeWeight:2
                 });

                        flightPath.setMap(map);
                  }

                  google.maps.event.addDomListener(window, 'load', initialize);
                  </script>
                   </head>

                     <body>
                     <div id="googleMap" style="width:500px;height:380px;"></div>
                     </body>
                  </html> 

help me with how to add labels.

解决方案

Ok, here's an example adapted from the article I linked to. It displays the label at the point where you clicked.

<!DOCTYPE html>
<html>
<head>
<title>Polyline with label on click</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script>
// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
    // Initialization
    this.setValues(opt_options);

    // Label specific
    var span = this.span_ = document.createElement('span');
    span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
                         'white-space: nowrap; border: 1px solid blue; ' +
                         'padding: 2px; background-color: white';

    var div = this.div_ = document.createElement('div');
    div.appendChild(span);
    div.style.cssText = 'position: absolute; display: none';
}
Label.prototype = new google.maps.OverlayView();

// Implement onAdd
Label.prototype.onAdd = function() {
    var pane = this.getPanes().floatPane;
    pane.appendChild(this.div_);

    // Ensures the label is redrawn if the text or position is changed.
    var me = this;
    this.listeners_ = [
        google.maps.event.addListener(this, 'position_changed',
            function() { me.draw(); }),
        google.maps.event.addListener(this, 'text_changed',
            function() { me.draw(); })
    ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
    var i, I;
    this.div_.parentNode.removeChild(this.div_);

    // Label is removed from the map, stop updating its position/text.
    for (i = 0, I = this.listeners_.length; i < I; ++i) {
        google.maps.event.removeListener(this.listeners_[i]);
    }
};

// Implement draw
Label.prototype.draw = function() {
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel(this.get('position'));

    var div = this.div_;
    div.style.left = position.x + 'px';
    div.style.top = position.y + 'px';
    div.style.display = 'block';

    this.span_.innerHTML = this.get('text').toString();
};

function initialize() {
    var stavanger=new google.maps.LatLng(58.983991,5.734863);
    var amsterdam=new google.maps.LatLng(52.395715,4.888916);
    var london=new google.maps.LatLng(51.508742,-0.120850);

    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 5,
        center: new google.maps.LatLng(52.395715,4.888916),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var myTrip=[stavanger,amsterdam,london];

    var flightPath=new google.maps.Polyline({
        path:myTrip,
        strokeColor:"#0000FF",
        strokeOpacity:0.8,
        strokeWeight:2,
        map:map
    });

    // create an invisible marker
    labelMarker = new google.maps.Marker({
        position: stavanger,  
        map: map,
        visible: false
    });

    var myLabel = new Label();

    // lets add an event listener, if you click the line, i'll tell you the coordinates you clicked
    flightPath.addListener('click', function(e) {
        labelMarker.setPosition(e.latLng)
        myLabel.bindTo('position', labelMarker, 'position');
        myLabel.set('text', e.latLng.toString());
        myLabel.setMap(map);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map_canvas"></div>
</body>
</html>

这篇关于与标签在javascript中的多义线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！