好的,所以我可以从PHP页面获取JSON,但是当用户点击li
内的ul#stores
时,它就不会运行。它就像
$("ul#stores").html("");
myMarkers = {"markers": data}
没有更新,它无法在列表中找到它,并且下面的函数没有运行。完整代码结束。我不确定这是否是解释我的问题的最佳方式。
现场演示@ http://brightchoice.com.au/map.html
$("ul#stores li").on("click", function(event){
var store = $(this).text();
$("ul#stores").hide();
$("#storeinfo").show();
$.each(myMarkers.markers, function(i, data){
if(store == data.name) {
$("#storeinfo").append("<a href='map.html'><div class='greenbar'><div class='body'><div> <span></span> </div> <p>Back</p></div></a></div><h1>"+data.name+"</h1>"+data.phone+"<br><br>"+data.address);
//console.log(data.address);
//console.log(data.state); // and more
}
});
//searchlistings($(this).text());
});
完整代码
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
//set up markers
var myMarkers = {"markers": [{"id": 1,"name": "Belconnen","url_name": "belconnen","address": "Shop 176, 3rd Floor, Westfield Shopping Centre, Benjamin Way","suburb": "Belconnen","state": "act","postcode": 2618,"country": "Australia","phone": "(02) 6251 1838","fax": "","photo": "dcddfcb5c806b2255c611bd2d108cead.JPG","text": "","display": 1,"lat": -35.238428606,"lng": 149.065917134,"email": "tc.belconnen@telechoice.com.au","dealer_code": 63014,"region_id": 3,"type": 4}]};
//set up map options
defaultmap();
$("a#backtomap").on("click", function(event){
defaultmap();
$("ul#stores").show();
$("#storeinfo").hide();
});
$("button#search").on("click", function(event){
var postcode = $("input#postcode").val();
$.getJSON("http://vipcashback.com/system/classes/core.php?task=postcode&mycode="+postcode, function(data) {
$("ul#stores").html("");
listings = {"markers": data}
$("#map").mapmarker({
zoom : 10,
center : postcode+" australia",
markers : listings
});
$.each(myMarkers.markers, function(i, data){
});
});
});
$("ul#stores li").on("click", function(event){
var store = $(this).text();
alert(store);
$("ul#stores").hide();
$("#storeinfo").show();
$.each(myMarkers.markers, function(i, data){
if(store == data.name) {
$("#storeinfo").append("<a href='map.html'><div class='greenbar'><div class='body'><div> <span></span> </div> <p>Back</p></div></a></div><h1>"+data.name+"</h1>"+data.phone+"<br><br>"+data.address);
//console.log(data.address);
//console.log(data.state); // and more
}
});
//searchlistings($(this).text());
});
function defaultmap(){
$("#map").mapmarker({
zoom : 3,
center : 'Australia',
markers : myMarkers
});
}
});
// ]]>
</script>
答案 0 :(得分:1)
如果你动态创建应该使用的元素:
$('ul#stores li).live('click',function(){ ...});
直播,以便将来的元素自动绑定到事件。
答案 1 :(得分:0)
通过插件代码,它需要PHP页面中JSON中缺少的经度和纬度
插件代码 -
if(latitude!="" && longitude!=""){
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude,longitude),
animation: google.maps.Animation.DROP,
icon: icon
});
// Set up markers with info windows
google.maps.event.addListener(marker, 'click', function() {
// Close all open infowindows
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: baloon_text
});
infowindow.open(map,marker);
});
}
});