0
これまでのコードでは、Google Maps APIを使用してユーザーが入力した内容を地図上で検索し、地図の右。私が欠けている部分は、右の検索では、クリックできるようにする必要があります。クリックすると、地図上のマーカーに移動します。 .on（ 'click'、...）を使って何らかの理由で適切に動作しないため、何かアドバイスやヒントがあれば、私はそれを理解する手助けをしてくれるのだろうかと思っていました。ウェブページに動的に追加されたLI要素にクリック可能性を追加
ありがとうございました！ の.htmlファイル：
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src = "project2.js"></script>
<link rel = "stylesheet" type = "text/css" href = "project2.css">
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<form>
<div>
<label> Address: </label>
<input id = "address" type = "text">
<input id = "submit" type = "button" value = "Add">
<br><br>
</div>
</form>
<section>
<ul>
</ul>
</section>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGysAFeYIRV2qqMeEcnehH9igIaSYxvvs&callback=initMap"></script>
</body>
</html>
.jsファイル：
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.083, lng: -74.174},
zoom: 8
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
showAddress(geocoder, map);
//getLinks();
});
}
function showAddress(geocoder, newMap)
{
var address = document.getElementById('address').value;
//console.log(address);
$('<li/>').addClass('list').text(address).appendTo('ul');
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
newMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map:newMap,
position: results[0].geometry.location
});
}
else {
alert('Geocode was not successful for reason: ' + status);
}
});
}
/*
function getLinks()
{
console.log("hey");
$('#elements').on('click', 'li', function(){
alert($(this).text());
console.log("hey2");
});
}*/
の.cssファイル：
input[type = text]
{
width: 375px;
}
li {
list-style-type: none;
width: 450px;
border-style: solid;
padding: 0.3em;
margin-left: 475px;
margin-right: auto;
margin-bottom: .5em;
}
.list {
background-color: #8E8989;
}
#map {
position:absolute;
top: 50px;
height:60%;
width:40%;
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
}
html, body{
height: 100%;
margin:0;
padding:5px;
}
ありがとうございます！
試し 'のようなものを使用する必要が動的に生成された要素にイベントを追加するには$（ 'body'）。on（ 'click'、 'li'、function（）{ //何かをする }）;「何が出てくるのか教えてください –
それは働いた！ありがとうございました。私はなぜそれが$（ 'li'）の代わりに働いたのか疑問に思いました。（ 'クリック'、 'リ'、...）？ –
@A K私は答えとしてそれを追加しています、それを受け入れてください:) –