Полилиния с меткой в javascript

Это мой код, который используется для добавления полилинии, но я хочу добавить метку при щелчке по полилинии. Когда я нажимаю на полилинию, на ней отображается метка.Полилиния с меткой в 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); 

      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>

Помогите мне с тем, как добавить этикетки.

источник

2013-12-18 user3082371

Вот [статья] (https://duncan99.wordpress.com/2013/02/28/google-maps-api-polylines-and-events/) о том, как добавить метки к полилинии в ответ пользователю клики – duncan

, что является хорошей статьей, можете ли вы поделиться ссылкой, чтобы добавить ярлык на Google Maps, используя его lat/long ?? – user3082371

Хорошо, вот пример из the article I linked to. Он отображает метку в точке, где вы нажали.

<!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>

источник

2013-12-18 14:19:25 duncan

thnx за сообщение, мне это очень помогло – user3082371

Добро пожаловать. Не стесняйтесь [примите мой ответ] (http://stackoverflow.com/help/someone-answers), если хотите – duncan

Полилиния с меткой в ​​javascript

ответ

Смежные вопросы

Полилиния с меткой в javascript