// 添加 Marker
function addMarker(jsonData) {
for (var i = 0; i < jsonData.length; i++) {
var pointX = jsonData[i].x;
var pointY = jsonData[i].y;
var rr = window.rr;
var point = rangeDis(pointX, pointY, rr)
if (point == undefined) {
continue;
}
// 测距(定位到商家)
var icon = jsonData[i].myIcon
var music = jsonData[i].music
var title = jsonData[i].title
var marker = new AMap.Marker({
position: point,
map: map,
icon: icon,
label: {
offset: new AMap.Pixel(0, 1), //设置文本标注偏移量
content: "<div class='info'>" + title + "</div>", //设置文本标注内容
direction: 'top' //设置文本标注方位
},
title: title,
price: jsonData[i].price,
img: jsonData[i].img,
imgvr: jsonData[i].imgvr,
address: jsonData[i].address,
music: jsonData[i].music,
visible: true,
});
AMap.event.addListener(marker, 'click', function(e) {
var clouddata = e.target.B;
console.log(clouddata)
_location = [clouddata.position.lng, clouddata.position.lat];
document.getElementById("testo").setAttribute("src", clouddata.music);
//实例化信息窗体
var title = clouddata.title,
content = [];
// 景点有音频
var infoWindowSpotYes = new AMap.InfoWindow({
content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div></div>" +
"<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
"<div id=" + clouddata.music +
" class='tr_music' οnclick='playMusic(this)'><img οnclick='bf_bt(this)' class='imgss' src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/img/bftb1.png'/></div>" +
"<div class='tr_winA'><a id='imgvr' href=" + clouddata.imgvr +
"><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win1.png'/></a>" +
"<a href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position.lat +
"&name=" + title +
"'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
size: new AMap.Size(0, 0),
autoMove: true,
closeWhenClickMap: true,
offset: new AMap.Pixel(0, -25)
});
// 景点无音频
var infoWindowSpotNo = new AMap.InfoWindow({
content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div></div>" +
"<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
"<div class='tr_winA'><a id='imgvr' href=" + clouddata.imgvr +
"><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win1.png'/></a>" +
"<a href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position.lat +
"&name=" + title +
"'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
size: new AMap.Size(0, 0),
autoMove: true,
closeWhenClickMap: true,
offset: new AMap.Pixel(0, -25)
});
// 酒店+美食
var infoWindowHF = new AMap.InfoWindow({
content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div><div class='sp'>价格:" +
clouddata.price + "</div></div>" +
"<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
"<div class='tr_winA'><a id='imgvr' href=" + clouddata.imgvr +
"><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win1.png'/></a>" +
"<a href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position.lat +
"&name=" + title +
"'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
size: new AMap.Size(0, 0),
autoMove: true,
closeWhenClickMap: true,
offset: new AMap.Pixel(0, -25)
});
// 厕所停车场
var infoWindowWCP = new AMap.InfoWindow({
content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div><div class='sp'>价格:" +
clouddata.price + "</div></div>" +
"<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
"<a class='tr_dha' href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position
.lat +
"&name=" + title +
"'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
size: new AMap.Size(0, 0),
autoMove: true,
closeWhenClickMap: true,
offset: new AMap.Pixel(0, -25)
});
if (clouddata.icon == "https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/landscape.png") {
infoWindowSpotNo.open(map, _location);
} else if (clouddata.icon == "https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/landscape_audio.png") {
infoWindowSpotYes.open(map, _location);
} else if (clouddata.icon == "https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/hotel.png" || clouddata.icon ==
"https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/food.png") {
infoWindowHF.open(map, _location);
} else {
infoWindowWCP.open(map, _location);
}
});
}
}
可根据不同marker设计不同信息窗体