我具有邮政编码功能,当用户输入邮政编码时,它将在Google地图上显示送货地址,其时间和位置的列表。
这可以正常工作,但是当我单击另一个收货地址时,地图不会使用与该列表项相关联的经纬度更新。
我该如何编写点击功能以将google map更改为所选项目的新纬度?
这是我的jQuery,用于在用户搜索后显示数据
$('#search').blur(function() {
$('#result').html('');
$('#lat-long').html('');
$('#opening-times').html('');
$('#del-lists-wrapper').html('');
var searchField = $('#search').val();
var expression = new RegExp(searchField, "i");
$.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {
//console.log('json')
$.each(data, function(key, value) {
if (value.address.postcode.search(expression) != -1) {
//console.log(value)
//COURIER ADDRESS DETAILS
$('#result').append('<li data-contentid='+ key +' class="list-group-item courier"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="address"> ' + value.address.name + ',' + value.address.line1 + ',' + value.address.town + ',' + value.address.county + ',' + value.address.postcode + '</div></li>');
//LAT AND LONG
var mapProp= {
center:new google.maps.LatLng(value.location.latitude,value.location.longitude),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
//OPENING TIMES
$('#opening-times').append('<li id=open-times-'+ key +' class="list-group-item op-times"><div class="c-name font-weight-bold"> Opening Times </div><div class="">Mon ' + value.opening_times.Mon + ' </div><div class="">Tues ' + value.opening_times.Tues + ' </div><div class="">Wed ' + value.opening_times.Wed + ' </div><div class="">Thurs ' + value.opening_times.Thurs + ' </div><div class="">Fri ' + value.opening_times.Fri + ' </div><div class="">Sat ' + value.opening_times.Sat + ' </div><div class="">Sun ' + value.opening_times.Sun + ' </div></li>');
// ARRAY DELIVERY OPTIONS
var ul = $('<ul id=del-add-'+ key +' class="del-options"></ul>');
$.each(value.delivery_options, function(key, val) {
ul.append('<li del-id=' + key + ' class="list-group-item"><div class="c-name font-weight-bold"> ' + val.name + ' </div><div> ' + val.description + ' </div><div class="c-price font-weight-bold"> ' + val.price + ' </div><div class="btn btn-primary btn-block mt-3"><a>Select ></a></div></li>');
});
ul.appendTo('#del-lists-wrapper');
//COURIER ADDRESS FOR OTHER CONTAINER
$('#address-container').append('<li id=cour-add-'+ key +' class="list-group-item alt-address"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="d-inline-block w-100"> ' + value.address.name + ' </div><div class="d-inline-block w-100"> ' + value.address.line1 + ' </div><div class="d-inline-block w-100"> ' + value.address.town + '</div><div class="d-inline-block w-100"> ' + value.address.county + ' </div><div class="d-inline-block w-100"> ' + value.address.postcode + '</div></li>');
}
});
});
});
HTML
<div class="modal" id="exampleModalLive" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Click and Collect</h5><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">Close ×</span></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-6">
<div id="count"></div>
<div class="col-12 click-collect--container px-0">
<form>
<div>
<input class="form-control float-left" id="modal-search" name="search" class="modal-search" placeholder="Search by postcode" type="text">
<input class="btnpostcode btn btn-primary" id="Btn_Search" name="BtnPostCode" value="Search >">
</div>
</form>
</div>
<ul class="list-group mt-3" id="result"></ul>
</div>
<div class="col-6">
<div class="d-inline-block w-100">
<div id="googleMap" style="width:100%;height:300px;"></div>
<ul class="list-group" id="lat-long"></ul>
</div>
<Div class="row">
<div class="col-6">
<ul class="list-group" id="address-container"></ul>
<ul class="list-group" id="opening-times"></ul>
</div>
<div class="col-6">
<div id="del-lists-wrapper"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
任何建议或技巧都很好。
感谢您的协助。