继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript在高德地图如何通过自定义json数据实现多个自定义marker

叫我威哥哥
关注TA
已关注
手记 9
粉丝 5
获赞 11

//模拟数据

var lng = "[{station_Id:'1',station_Name:'合康变频充电站',station_Num:60,address:[116.368904,39.923423]},{station_Id:'2',station_Name:'中润通充电站',station_Num:30,address:[116.398258,39.914600]},{station_Id:'3',station_Name:'家乐福充电站',station_Num:23,address:[116.3982348,39.914500]},{station_Id:'4',station_Name:'嘉捷充电站',station_Num:12,address:[116.398658,39.914900]},{station_Id:'5',station_Name:'合康飞飞充电站',station_Num:18,address:[116.468904,39.823423]}]";

var lnglats = eval(lng);

//遍历自定义marker数据

for (var i = 0 , marker;i<lnglats.length;i++) {

var marker = new AMap.Marker({

            position: lnglats[i].address,

            map: map

        });

         markers.push(marker);

 marker.content =  "<h3>"+(lnglats[i].station_Name)+"</h3><br/>" +"运营商:"+"某某某公司<br/>"+"开放时间:"+"0:00~24:00"+ "<br/>站点信息:共"+(lnglats[i].station_Num)+"台桩"+"<br/><a href='#' id='content' onClick='show();'>点击详情...<a>";

        marker.on('click', markerClick);

        marker.emit('click', {target: marker});

}


主要弄清楚position: lnglats[i].address这一块传值结构就可以了。


打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP