javascript中带标签的多段线
这是我用来添加多段线的代码，但我想在单击多段线时添加标签。当我单击多段线时，它会显示一个标签javascript中带标签的多段线,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,这是我用来添加多段线的代码，但我想在单击多段线时添加标签。当我单击多段线时，它会显示一个标签 <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.888
<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>
var x=新的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）；
函数初始化（）
{
var mapProp={
中心：x，
缩放：4，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
var myTrip=[stavanger，阿姆斯特丹，伦敦]；
var flightPath=new google.maps.Polyline({
路径：myTrip，
strokeColor:#0000FF“，
笔划不透明度：0.8，
冲程重量：2
});
flightPath.setMap（map）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
帮助我添加标签。好的，下面是一个改编自的示例。它将在单击的位置显示标签
<!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>
单击带有标签的多段线
html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
//定义从google.maps.OverlayView派生的覆盖
功能标签（选项）{
//初始化
此.setValues（opt_选项）；
//标签特定
var span=this.span=document.createElement（'span'）；
span.style.cssText='位置：相对；左侧：-50%；顶部：-8px；'+
'空白：nowrap；边框：1px纯蓝色；'+
'填充：2px；背景色：白色'；
var div=this.div=document.createElement（'div'）；
子类（span）；
div.style.cssText='位置：绝对；显示：无'；
}
Label.prototype=new google.maps.OverlayView（）；
//实施onAdd
Label.prototype.onAdd=函数（）{
var pane=this.getPanes（）.floatPane；
pane.appendChild（this.div)；
//确保在文本或位置更改时重新绘制标签。
var me=这个；
this.listeners=[
google.maps.event.addListener（这个“位置改变了”，
函数（）{me.draw（）；}），
google.maps.event.addListener（这个“text_changed”，
函数（）{me.draw（）；}）
];
};
//在移除时执行
Label.prototype.onRemove=函数（）{
变量i，i；
this.div\u.parentNode.removeChild（this.div\u）；
//标签从地图中删除，停止更新其位置/文本。
for（i=0，i=this.listeners_uu.length；i<!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>
单击带有标签的多段线
html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
//定义从google.maps.OverlayView派生的覆盖
功能标签（选项）{
//初始化
此.setValues（opt_选项）；
//标签特定
var span=this.span=document.createElement（'span'）；
span.style.cssText='位置：相对；左侧：-50%；顶部：-8px；'+
'空白：nowrap；边框：1px纯蓝色；'+
'填充：2px；背景色：白色'；
var div=this.div=document.createElement（'div'）；
子类（span）；
div.style.cssText='位置：绝对；显示：无'；
}
Label.prototype=new google.maps.OverlayView（）；
//实施onAdd
Label.prototype.onAdd=函数（）{
var pane=this.getPanes（）.floatPane；
pane.appendChild（this.div)；
//确保在文本或位置更改时重新绘制标签。
var me=这个；
this.listeners=[
google.maps.event.addListener（这个“位置改变了”，
函数（）{me.draw（）；}），
google.maps.event.addListener（这个“text_changed”，
函数（）{me.draw（）；}）
];
};
//在移除时执行
Label.prototype.onRe