Javascript 具有两个相应信息窗口的双地图标记
我有两个谷歌地图自动完成两个位置搜索输入。我还能够管理这两个地方的2个标记。但我也有一个for，需要输入名称（用户名）。该名称应显示在两个标记的信息窗口上。但一个标记显示信息窗口，另一个标记不显示窗口。显示信息窗口的标记不显示用户名 下面是我的HTML代码 下面是截图Javascript 具有两个相应信息窗口的双地图标记,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我有两个谷歌地图自动完成两个位置搜索输入。我还能够管理这两个地方的2个标记。但我也有一个for，需要输入名称（用户名）。该名称应显示在两个标记的信息窗口上。但一个标记显示信息窗口，另一个标记不显示窗口。显示信息窗口的标记不显示用户名 下面是我的HTML代码 下面是截图 这里有一个可能的修复方法。在autocomplete.addListener回调的末尾，添加以下行： var username = document.getElementById('name').value; infowindow
这里有一个可能的修复方法。在
autocomplete.addListenervar username = document.getElementById('name').value;
infowindowContent.children['place-name'].textContent = username;
infowindow.setContent(infowindowContent.innerHTML);
infowindow.open(map, marker);
这是一个。在用户输入信息之前，您正在填充
usernamehtml，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
datasetquerySelector（All）pac容器<!doctype html>
<html>
<head>
<title>Google Maps - two autocomplete</title>
<meta charset='utf-8' />
<script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyCqa9_oFYP4yorGy17BILIALjiqKXByoeE&libraries=places&callback=initMap'></script>
<script>
function initMap(){
/* some variables */
var autocomplete;
var infowindow;
var marker;
var options;
var place;
var obj;
var url;
var img;
/* DOM elements */
var oDiv = document.getElementById('map');
var oCard = document.getElementById('pac-card');
var oColInput= document.querySelectorAll('div#pac-container > input[data-type]');
var oUsername= document.getElementById('name');
/* Map initial config */
options={
center: {
lat: 59.325,
lng: 18.070
},
zoom: 9
};
/* the map */
var map = new google.maps.Map( oDiv, options );
/*
Define objects associated with each of the input elements
used for places.
Each object created has a reference stored in `obj` which is
used as a bound object to the event listener so that each item
can be accessed within the listener using `this`
*/
Array.prototype.slice.call( oColInput ).forEach( function( input ){
/* options for the autocomplete service */
options={
strictBounds: false
};
/* create the autocomplete object */
autocomplete = new google.maps.places.Autocomplete( input, options );
autocomplete.bindTo( 'bounds', map );
/* create the infowindow bound to this autocomplete object */
infowindow = new google.maps.InfoWindow( { maxWidth:320, disableAutoPan:false } );
infowindow.setContent( document.querySelector('div.iwin[ data-type="'+input.dataset.type+'" ]') );
/* ensure hidden content from infowindow does not alter layout */
google.maps.event.addListener( infowindow, 'closeclick', function( event ){
this.getContent().style.display='none';
}.bind( infowindow ));
/* add a marker bound to the autocomplete service */
marker=new google.maps.Marker({
map: map,
position: {
lat: parseFloat( input.dataset.lat ),
lng: parseFloat( input.dataset.lng )
},
anchorPoint: new google.maps.Point(0, -29)
});
/* Marker events */
google.maps.event.addListener( marker, 'click', function(e){
this.open( map );
this.getContent().style.display='block';
this.setPosition( e.latLng );
this.setOptions( { pixelOffset:new google.maps.Size(0,-32) } );
}.bind( infowindow ) );
/*
add a reference to each object to our binding object used below
*/
obj={
'input':input,
'type':input.dataset.type,
'marker':marker,
'autocomplete':autocomplete,
'infowindow':infowindow
}
/* Listen for changes and do some cool things */
autocomplete.addListener('place_changed',function(){
/* must have a username value to continue as it should appear on the infowindow */
if( oUsername.value=='' ){
oUsername.classList.add('warn');
setTimeout( function(){
this.input.value='';
oUsername.classList.remove('warn');
}.bind( this ),1500);
return;
}
/* reset existing marker if it exists */
this.marker.setVisible( false );
this.marker.title='';
var oWin=this.infowindow.getContent();
oWin.style.display='block';
place = this.autocomplete.getPlace();
console.info( place );
/* find suitable hidden inputs within form - using span as parent */
var oSpan=document.querySelector('form > span[ id="'+this.type+'" ]');
oSpan.querySelector('input[ data-id="name" ]').value=this.input.value=='' ? '' : place.name;
oSpan.querySelector('input[ data-id="lat" ]').value=this.input.value=='' ? '' : place.geometry.location.lat();
oSpan.querySelector('input[ data-id="lng" ]').value=this.input.value=='' ? '' : place.geometry.location.lng();
if( place.geometry.viewport ) {
map.fitBounds( place.geometry.viewport );
} else {
map.setCenter( place.geometry.location );
map.setZoom(9);
}
this.marker.setPosition( place.geometry.location );
this.marker.setVisible( true );
this.marker.title=place.name;
/* find infowindow content & append new values */
oWin.querySelector('span[data-id="user-name"]').innerHTML=oUsername.value;
oWin.querySelector('span[data-id="place-name"]').innerHTML=place.name;
oWin.querySelector('span[data-id="place-address"]').innerHTML=place.formatted_address;
if( oWin.querySelector( 'a[data-id="'+this.type+'"]' ) ) oWin.removeChild( oWin.querySelector( 'a[data-id="'+this.type+'"]' ) );
var a=document.createElement('a');
a.dataset.id=this.type;
a.innerHTML='more...';
a.target='_blank';
a.href=place.url;
oWin.appendChild( a );
/* open the infowindow and show new content */
this.infowindow.open( map, this.marker );
}.bind( obj ));/* bind all the objects */
});
}
</script>
<style>
html, body, #map {
height: 100%;
height:100vh;
margin: 0px;
padding: 0px
}
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
.iwin{/* hidden infowindow content elements */
display:none;
width:320px;
height:240px;
padding:1rem;
border:1px solid gray;
border-radius:1rem;
box-sizing:border-box;
font-family:calibri,verdana,arial;
}
.iwin > img{
display:inline-block;
clear:none;
margin:0.5rem;
float:left;
outline:1px dotted rgba(133,133,133,0.25);
padding:0.1rem;
min-width:80px;
min-height:120px;
}
.iwin > span{
float:left;
min-width:51%;
margin:0 auto 0.25rem auto;
display:inline-block;
clear:right;
color:gray;
}
.iwin > span[data-id='user-name']{
font-size:1.25rem;
font-weight:bold;
color:green;
}
.iwin > span[data-id='place-name']{
font-size:1rem;
}
.iwin > span[data-id='place-address']{
font-size:0.9rem;
}
.iwin > a{
float:right;
margin:1rem auto;
font-size:0.75rem;
}
#pac-card{
width:800px;
float:none;
margin:auto;
padding:1rem;
border:1px solid gray;
box-sizing:border-box;
display:flex;
justify-content:space-around;
}
form{
display:inline-block;
clear:none;
width:100%;
}
#pac-card > div {
box-sizing:border-box;
background:white;
clear:none;
margin:0;
float:none;
display:block;
}
input[type='text'],
input[type='submit']{
padding:1rem;
}
input[type='text'],
#name{
border:1px solid gray;
}
.warn{
border:1px solid red!important;
background:rgba(255,0,0,0.25);
color:white;
}
input[value]:not([value=""]) + span:before{
color:green;
background:transparent;
padding:0.25rem;
clear:none;
content:'L';
display:inline-block;
font-family: arial;
font-weight:bold;
font-size:1.5rem;
-ms-transform: scaleX(-1) rotate(-35deg);
-webkit-transform: scaleX(-1) rotate(-35deg);
transform: scaleX(-1) rotate(-35deg);
z-index:2;
position:relative;
left:-28rem!important;
}
input[type='submit']{
text-transform:uppercase;
}
</style>
</head>
<body>
<!-- // more or less original html content - less ID attributes but extensive use of dataset attributes // -->
<div class='pac-card' id='pac-card'>
<div id='pac-container'>
<input data-type='stateside' data-lat='59.325' data-lng='18.070' type='text' placeholder='StateSide Guess' value='' />
<input data-type='foreign' data-lat='50.325' data-lng='24.070' type='text' placeholder='Foreign Guess' value='' />
</div>
<div>
<form class='guess-submit' style='text-align: center'>
<span id='stateside'>
<input type='hidden' data-id='name' name='state' value='' /><span></span>
<input type='hidden' data-id='lat' name='stateLat' value='' />
<input type='hidden' data-id='lng' name='stateLng' value='' />
</span>
<span id='foreign'>
<input type='hidden' data-id='name' name='foreign' value='' /><span></span>
<input type='hidden' data-id='lat' name='foreignLat' value='' />
<input type='hidden' data-id='lng' name='foreignLng' value='' />
</span>
<input type='text' id='name' name='name' placeholder='Your Name' />
<input type='submit' id='submit' class='btn btn-primary' value='submit' />
</form>
</div>
</div>
<div id='map'></div>
<!-- hidden elements - infowindow contents -->
<div id='win_1' class='iwin' data-type='stateside'>
<img src='' width='16' height='16' />
<span data-id='user-name' class='user'></span>
<span data-id='place-name' class='title'></span>
<br />
<span data-id='place-address'></span>
</div>
<div id='win_2' class='iwin' data-type='foreign'>
<img src='' width='16' height='16' />
<span data-id='user-name' class='user'></span>
<span data-id='place-name' class='title'></span>
<br />
<span data-id='place-address'></span>
</div>
<!-- // // -->
</body>
</html>
谷歌地图-两个自动完成
函数initMap（）{
/*一些变量*/
var自动完成；
var信息窗口；
var标记；
var期权；
var place；
var-obj；
var-url；
var-img；
/*DOM元素*/
var oDiv=document.getElementById（'map'）；
var-oCard=document.getElementById（'pac-card'）；
var oColInput=document.querySelectorAll（'div#pac container>input[data type]”）；
var oUsername=document.getElementById（'name'）；
/*映射初始配置*/
选择权={
中心：{
拉脱维亚：59.325，
液化天然气：18.070
},
缩放：9
};
/*地图*/
var map=newgoogle.maps.map（oDiv，选项）；
/*
定义与每个输入元素关联的对象
用于场所。
创建的每个对象都有一个存储在'obj'中的引用，它是
用作事件侦听器的绑定对象，以便每个项
可以使用“this”在侦听器中访问`
*/
Array.prototype.slice.call（oColInput.forEach）（函数（输入）{
/*自动完成服务的选项*/
选择权={
严格限制：错误
};
/*创建自动完成对象*/
autocomplete=newgoogle.maps.places.autocomplete（输入，选项）；
自动完成。bindTo（'bounds'，map）；
/*创建绑定到此自动完成对象的信息窗口*/
infowindow=newgoogle.maps.infowindow（{maxWidth:320，disableAutoPan:false}）；
infowindow.setContent（document.querySelector（'div.iwin[data type=“”+input.dataset.type+”）；
/*确保信息窗口中的隐藏内容不会改变布局*/
google.maps.event.addListener（信息窗口，'closeclick'，函数（事件）{
this.getContent（）.style.display='none'；
}.bind（infowindow））；
/*添加绑定到自动完成服务的标记*/
marker=新的google.maps.marker({
地图：地图，
职位：{
lat:parseFloat（input.dataset.lat），
lng:parseFloat（input.dataset.lng）
},
主播点：新google.maps.Point（0，-29）
});
/*标记事件*/
google.maps.event.addListener（标记，'click'，函数（e）{
这个。打开（地图）；
this.getContent（）.style.display='block'；
此设置位置（如板条）；
setOptions（{pixelcoffset:new google.maps.Size（0，-32）}）；
}.bind（infowindow））；
/*
将每个对象的引用添加到下面使用的绑定对象
*/
obj={
“输入”：输入，
“类型”：input.dataset.type，
“标记”：标记，
“自动完成”：自动完成，
“infowindow”：infowindow
}
/*倾听变化，做一些很酷的事情*/
autocomplete.addListener（'place\u changed'，function（）{
/*必须具有用户名值才能继续，因为它应该显示在信息窗口上*/
if（userName.value==''）{
var username = document.getElementById('name').value;
infowindowContent.children['place-name'].textContent = username;
infowindow.setContent(infowindowContent.innerHTML);
infowindow.open(map, marker);
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
document.getElementById('state').value = place.name;
document.getElementById('stateLat').value = place.geometry.location.lat();
document.getElementById('stateLng').value = place.geometry.location.lng();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(9);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
username = document.getElementById('name').value; // <============= ** get it here **
infowindowContent.children['place-name'].textContent = username;
infowindow.open(map, marker);
});
<!doctype html>
<html>
<head>
<title>Google Maps - two autocomplete</title>
<meta charset='utf-8' />
<script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyCqa9_oFYP4yorGy17BILIALjiqKXByoeE&libraries=places&callback=initMap'></script>
<script>
function initMap(){
/* some variables */
var autocomplete;
var infowindow;
var marker;
var options;
var place;
var obj;
var url;
var img;
/* DOM elements */
var oDiv = document.getElementById('map');
var oCard = document.getElementById('pac-card');
var oColInput= document.querySelectorAll('div#pac-container > input[data-type]');
var oUsername= document.getElementById('name');
/* Map initial config */
options={
center: {
lat: 59.325,
lng: 18.070
},
zoom: 9
};
/* the map */
var map = new google.maps.Map( oDiv, options );
/*
Define objects associated with each of the input elements
used for places.
Each object created has a reference stored in `obj` which is
used as a bound object to the event listener so that each item
can be accessed within the listener using `this`
*/
Array.prototype.slice.call( oColInput ).forEach( function( input ){
/* options for the autocomplete service */
options={
strictBounds: false
};
/* create the autocomplete object */
autocomplete = new google.maps.places.Autocomplete( input, options );
autocomplete.bindTo( 'bounds', map );
/* create the infowindow bound to this autocomplete object */
infowindow = new google.maps.InfoWindow( { maxWidth:320, disableAutoPan:false } );
infowindow.setContent( document.querySelector('div.iwin[ data-type="'+input.dataset.type+'" ]') );
/* ensure hidden content from infowindow does not alter layout */
google.maps.event.addListener( infowindow, 'closeclick', function( event ){
this.getContent().style.display='none';
}.bind( infowindow ));
/* add a marker bound to the autocomplete service */
marker=new google.maps.Marker({
map: map,
position: {
lat: parseFloat( input.dataset.lat ),
lng: parseFloat( input.dataset.lng )
},
anchorPoint: new google.maps.Point(0, -29)
});
/* Marker events */
google.maps.event.addListener( marker, 'click', function(e){
this.open( map );
this.getContent().style.display='block';
this.setPosition( e.latLng );
this.setOptions( { pixelOffset:new google.maps.Size(0,-32) } );
}.bind( infowindow ) );
/*
add a reference to each object to our binding object used below
*/
obj={
'input':input,
'type':input.dataset.type,
'marker':marker,
'autocomplete':autocomplete,
'infowindow':infowindow
}
/* Listen for changes and do some cool things */
autocomplete.addListener('place_changed',function(){
/* must have a username value to continue as it should appear on the infowindow */
if( oUsername.value=='' ){
oUsername.classList.add('warn');
setTimeout( function(){
this.input.value='';
oUsername.classList.remove('warn');
}.bind( this ),1500);
return;
}
/* reset existing marker if it exists */
this.marker.setVisible( false );
this.marker.title='';
var oWin=this.infowindow.getContent();
oWin.style.display='block';
place = this.autocomplete.getPlace();
console.info( place );
/* find suitable hidden inputs within form - using span as parent */
var oSpan=document.querySelector('form > span[ id="'+this.type+'" ]');
oSpan.querySelector('input[ data-id="name" ]').value=this.input.value=='' ? '' : place.name;
oSpan.querySelector('input[ data-id="lat" ]').value=this.input.value=='' ? '' : place.geometry.location.lat();
oSpan.querySelector('input[ data-id="lng" ]').value=this.input.value=='' ? '' : place.geometry.location.lng();
if( place.geometry.viewport ) {
map.fitBounds( place.geometry.viewport );
} else {
map.setCenter( place.geometry.location );
map.setZoom(9);
}
this.marker.setPosition( place.geometry.location );
this.marker.setVisible( true );
this.marker.title=place.name;
/* find infowindow content & append new values */
oWin.querySelector('span[data-id="user-name"]').innerHTML=oUsername.value;
oWin.querySelector('span[data-id="place-name"]').innerHTML=place.name;
oWin.querySelector('span[data-id="place-address"]').innerHTML=place.formatted_address;
if( oWin.querySelector( 'a[data-id="'+this.type+'"]' ) ) oWin.removeChild( oWin.querySelector( 'a[data-id="'+this.type+'"]' ) );
var a=document.createElement('a');
a.dataset.id=this.type;
a.innerHTML='more...';
a.target='_blank';
a.href=place.url;
oWin.appendChild( a );
/* open the infowindow and show new content */
this.infowindow.open( map, this.marker );
}.bind( obj ));/* bind all the objects */
});
}
</script>
<style>
html, body, #map {
height: 100%;
height:100vh;
margin: 0px;
padding: 0px
}
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
.iwin{/* hidden infowindow content elements */
display:none;
width:320px;
height:240px;
padding:1rem;
border:1px solid gray;
border-radius:1rem;
box-sizing:border-box;
font-family:calibri,verdana,arial;
}
.iwin > img{
display:inline-block;
clear:none;
margin:0.5rem;
float:left;
outline:1px dotted rgba(133,133,133,0.25);
padding:0.1rem;
min-width:80px;
min-height:120px;
}
.iwin > span{
float:left;
min-width:51%;
margin:0 auto 0.25rem auto;
display:inline-block;
clear:right;
color:gray;
}
.iwin > span[data-id='user-name']{
font-size:1.25rem;
font-weight:bold;
color:green;
}
.iwin > span[data-id='place-name']{
font-size:1rem;
}
.iwin > span[data-id='place-address']{
font-size:0.9rem;
}
.iwin > a{
float:right;
margin:1rem auto;
font-size:0.75rem;
}
#pac-card{
width:800px;
float:none;
margin:auto;
padding:1rem;
border:1px solid gray;
box-sizing:border-box;
display:flex;
justify-content:space-around;
}
form{
display:inline-block;
clear:none;
width:100%;
}
#pac-card > div {
box-sizing:border-box;
background:white;
clear:none;
margin:0;
float:none;
display:block;
}
input[type='text'],
input[type='submit']{
padding:1rem;
}
input[type='text'],
#name{
border:1px solid gray;
}
.warn{
border:1px solid red!important;
background:rgba(255,0,0,0.25);
color:white;
}
input[value]:not([value=""]) + span:before{
color:green;
background:transparent;
padding:0.25rem;
clear:none;
content:'L';
display:inline-block;
font-family: arial;
font-weight:bold;
font-size:1.5rem;
-ms-transform: scaleX(-1) rotate(-35deg);
-webkit-transform: scaleX(-1) rotate(-35deg);
transform: scaleX(-1) rotate(-35deg);
z-index:2;
position:relative;
left:-28rem!important;
}
input[type='submit']{
text-transform:uppercase;
}
</style>
</head>
<body>
<!-- // more or less original html content - less ID attributes but extensive use of dataset attributes // -->
<div class='pac-card' id='pac-card'>
<div id='pac-container'>
<input data-type='stateside' data-lat='59.325' data-lng='18.070' type='text' placeholder='StateSide Guess' value='' />
<input data-type='foreign' data-lat='50.325' data-lng='24.070' type='text' placeholder='Foreign Guess' value='' />
</div>
<div>
<form class='guess-submit' style='text-align: center'>
<span id='stateside'>
<input type='hidden' data-id='name' name='state' value='' /><span></span>
<input type='hidden' data-id='lat' name='stateLat' value='' />
<input type='hidden' data-id='lng' name='stateLng' value='' />
</span>
<span id='foreign'>
<input type='hidden' data-id='name' name='foreign' value='' /><span></span>
<input type='hidden' data-id='lat' name='foreignLat' value='' />
<input type='hidden' data-id='lng' name='foreignLng' value='' />
</span>
<input type='text' id='name' name='name' placeholder='Your Name' />
<input type='submit' id='submit' class='btn btn-primary' value='submit' />
</form>
</div>
</div>
<div id='map'></div>
<!-- hidden elements - infowindow contents -->
<div id='win_1' class='iwin' data-type='stateside'>
<img src='' width='16' height='16' />
<span data-id='user-name' class='user'></span>
<span data-id='place-name' class='title'></span>
<br />
<span data-id='place-address'></span>
</div>
<div id='win_2' class='iwin' data-type='foreign'>
<img src='' width='16' height='16' />
<span data-id='user-name' class='user'></span>
<span data-id='place-name' class='title'></span>
<br />
<span data-id='place-address'></span>
</div>
<!-- // // -->
</body>
</html>