-1
我在個人項目上工作。我有一個表單bootstrap。在表單中，用戶可以點擊按鈕並查看谷歌地圖並選擇商店。如何將onclick事件添加到Google Maps中的infowindow中？
除了單擊信息窗口中的「選擇存儲」鏈接，一切正常。
下面是它的鏈接： https://codepen.io/brettdavis4/pen/wraNJV
我已經試過這兩種不同的方式，我沒有任何運氣。
當我嘗試這樣說，沒有任何反應，當我在地圖上點擊：
var contentString2 = stores[i].name + '<br/><a href="#" class="mapclick" data-value="test">Select Store</a>';
我得到一個錯誤，當我試着這樣說：
var contentString2 = stores[i].name + '<br/><a href="#" onclick="selectstore("test");">Select Store</a>';
這是錯誤，我收到：
Uncaught SyntaxError: Unexpected token }
有人可以看看筆並指向正確的方向嗎？
$('#btnClosestBB').click(function(event) {
event.preventDefault();
$('#myModal').modal('show');
});
$('#myModal').on("shown.bs.modal", initialize);
var address = document.getElementById('address').value + ', ' + document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zip').value;
var stores = [{
name: 'Greenwood Best Buy',
phone: '317-555-1000',
long: -86.119458,
lat: 39.629789,
id: 1
},
{
name: 'Eastside Best Buy',
phone: '317-555-1000',
long: -85.992033,
lat: 39.773182,
id: 2
},
{
name: 'Castleton Best Buy',
phone: '317-555-1000',
long: -86.069270,
lat: 39.906005,
id: 3
},
{
name: 'Carmel Best Buy',
phone: '317-555-1000',
long: -86.230302,
lat: 39.934572,
id: 4
},
{
name: 'North Carmel Best Buy',
phone: '317-555-1000',
long: -86.129277,
lat: 40.000897,
id: 5
},
{
name: 'Avon Best Buy',
phone: '317-555-1000',
long: -86.339541,
lat: 39.764612,
id: 6
},
{
name: 'Lafayette Rd. Best Buy',
phone: '317-555-1000',
long: -86.245499,
lat: 39.839805,
id: 7
}
];
function showResult(result) {
document.getElementById('latitude').value = result.geometry.location.lat();
document.getElementById('longitude').value = result.geometry.location.lng();
}
function getLatitudeLongitude(callback, address) {
// Initialize the Geocoder
geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
callback(results[0]);
}
});
}
}
function initialize() {
var center = new google.maps.LatLng(document.getElementById('latitude').value, document.getElementById('longitude').value);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12,
center: center
});
var contentString = document.getElementById('name').value,
infowindow = new google.maps.InfoWindow({
content: contentString
}),
marker = new google.maps.Marker({
position: center,
map: map,
icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
for (var i = 0; i < stores.length; i++) {
//var contentString2 = stores[i].name + '<br/><a href="#" class="mapclick" data-value="test">Select Store</a>';
var contentString2 = stores[i].name + '<br/><a href="#" onclick="selectstore("test");">Select Store</a>';
infowindow2 = new google.maps.InfoWindow({
content: contentString2
}),
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(stores[i].lat, stores[i].long),
map: map,
icon: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png'
});
infowindow2.open(map, marker2);
}
}
$('a.mapclick').on('click', function(event) {
event.preventDefault();
alert('test');
});
function selectstore(name) {
console.log(name);
}
//convert address to lat/long
getLatitudeLongitude(showResult, address);#latitude {
display: none;
}
#longitude {
display: none;
}
.row {
margin-top: 15px
}
@media (min-width: 992px) .modal-lg {
width: 1000px;
}
.modal-body {
height: 400px;
}
#map-canvas {
width: 100%;
height: 100%;
}
.gm-style-iw+div {
display: none;
}<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://brettdavis4.github.io/udacity_js_design_patterns/final/js/oauth.js"></script>
<script src="https://brettdavis4.github.io/udacity_js_design_patterns/final/js/sha1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMbcfzQwpyQHGt0LYix-RB0guBH0OOdgg&extension=.js&output=embed&foo=bar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body role="document">
<div class="container theme-showcase" role="main">
<div id="divform">
<input type="text" id="latitude" readonly="" />
<input type="text" id="longitude" readonly="" />
<form id="frmworkout">
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>Name:</span>
</span>
<input id="name" value="Bankers Life Fieldhouse" type="text" class="form-control" readonly="true" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>Street Address:</span>
</span>
<input id="address" value="125 S Pennsylvania St" type="text" class="form-control" readonly="true" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>City:</span>
</span>
<input id="city" value="Indianapolis" type="text" class="form-control" readonly="true" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>State:</span>
</span>
<input id="state" value="IN" type="text" class="form-control" readonly="true" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>Zip Code:</span>
</span>
<input id="zip" value="46204" type="text" class="form-control" readonly="true" />
</div>
</div>
</div>
<br/><button id="btnClosestBB" class=".btn-default">Choose a Best Buy Store</button>
<h4>Best Buy Store Details:</h4>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>Store Name:</span>
</span>
<input id="bbname" type="text" class="form-control" />
</div>
</div>
</div>
</form>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Select a store:</h4>
</div>
<div class="modal-body">
<div id="map-canvas"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>