master

分支 (1)

管理

管理

master

TranslateMarker
/
index.html

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3D地图</title>
<style>
body,html{ margin:0;padding:0;font:12px/16px Verdana,Helvetica,Arial,sans-serif;width: 100%;height: 100%}
.container{
  height: 100%
}
</style>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8c9c069fcaf9c28176ee677a2ecc571f&plugin=AMap.ControlBar"></script>
</head>
<body >
<div id="container" style="width:100%; height:100%;resize:both;"></div>
<script language="javascript">
var map;

  map = new AMap.Map('container', {
    // resizeEnable: true,
    // rotateEnable:true,
    // pitchEnable:true,
    zoom: 13,
    pitch:80,
    //rotation:-15,
    //viewMode:'3D',//开启3D视图,默认为关闭
    // buildingAnimation:true,//楼块出现是否带动画

    // expandZoomRange:true,
    zooms:[3,20],
    center:[113.149939,22.993669]
  });


var lnglats =
[[113.130491,22.96615],
[113.047349,23.060296],
[113.089539,22.946436],
[113.217197,22.926226],
[113.241892,23.016053],
[113.181874,23.103795],
[113.106913,23.026584],
[113.113533,23.030899],
[113.109109,23.025239],
[113.240032,22.951933],
[113.244483,22.952438],
[113.102924,22.953019],
[113.143236,23.016427],
[113.081147,22.919885],
[113.07804,22.872231],
[113.232922,23.005806],
[113.226046,22.866331],
[113.078267,22.867114],
[113.095525,22.951171],
[113.171745,23.024389],
[113.164943,23.023542],
[113.13694,23.055163],
[113.139228,23.012665],
[113.151994,23.038449],
[113.160291,22.972989],
[113.112669,22.992257],
[113.262953,22.817996]]

var names=[
"佛山新城保利洲际酒店",
"佛山希尔顿酒店",
"佛山罗浮宫索菲特酒店",
"佛山顺德铂尔曼酒店",
"佛山南海保利皇冠假日酒店",
"佛山南海和华希尔顿逸林酒店",
"佛山恒安瑞士大酒店",
"佛山岭南天地马哥孛罗酒店",
"佛山皇冠假日酒店",
"佛山顺德顺联温德姆酒店",
"佛山新君悦国际酒店",
"佛山德悦高酒店",
"佛山华美达酒店",
"顺德华美达酒店（乐从店）",
"顺德联塑万怡酒店",
"佛山三龙湾希尔顿欢朋酒店",
"佛山顺德保利假日酒店 ",
"佛山龙江希尔顿欢朋酒店",
"佛山财神酒店",
"佛山金禧酒店",
"佛山格雷斯精选酒店（佛山桂城千灯湖店）",
"柏丽酒店(佛山千灯湖店)",
"佛山星汇四季酒店",
"佛山南海新湖大酒店",
"维也纳国际花卉世界店",
"维纳斯皇家酒店（佛山魁奇地铁站）",
"佛山德莱酒店 "
]
var adds=[
"佛山顺德区乐从镇东平新城文华南路8号",
"佛山禅城区岭南大道北127号",
"佛山罗浮宫索菲特酒店",
"广东佛山顺德区北滘镇林上路2号",
"佛山南海区环岛南路20号",
"佛山南海区大沥镇广佛路盐步段和华商贸广场1座",
"佛山禅城区城门头西路1号环球国际广场1层",
"广东佛山禅城区人民路97号",
"佛山禅城区汾江中路118号",
"广东佛山顺德区陈村镇佛陈路1号",
"广东佛山顺德区佛陈路东延线1号",
"广东佛山顺德区乐从镇新桂路A78号",
"广东佛山禅城区同济东路80号",
"广东佛山顺德区乐从镇水藤大道28号",
"佛山顺德区龙江镇文华路11号",
"佛山南海区桂城街道疏港路28号富罗恩斯广场22栋",
"佛山顺德区伦教荔祥路",
"顺德龙江镇龙洲西路96号王鼎商务大厦",
"广东佛山顺德区乐从镇乐从社区居民委员会乐从大道东B82号",
"佛山南海区桂城东平路22号",
"佛山南海区桂城街道简平路7号益田假日天地9座",
"佛山南海区桂城街道海五路6号城智大厦2幢",
"佛山禅城区季华六路11号",
"佛山南海区桂城佛平二路158号(南海汽车站旁）",
"佛山顺德区佛陈公路3号",
"广东佛山禅城区汾江南路38号",
"佛山禅城区绿景三路4号"
]

//var lnglats = [[113.130491,22.96715], [113.130491,22.96815], [113.130491,22.96915]];
   var markers = [];
   var infoWindows = [];

    for (var i = 0; i < lnglats.length; i++) {
        var lnglat = lnglats[i];
        // 创建点实例
        var marker = new AMap.Marker({
            position: new AMap.LngLat(lnglat[0], lnglat[1]),
            icon: './holiday.png',
            extData: {
                id: i + 1
            }
        });

        marker.content =  i ;
        marker.on('click', showInfoM);
        markers.push(marker);

         var info = [];
         info.push("<div style=\' background-color:#1296db;color:white;padding:5px 10px; \'  ");
         info.push("酒店 : "+names[i]);
         info.push("地址 :"+adds[i]+"</div>");
         //console.log(info);

         marker.setLabel({
        //offset: new AMap.Pixel(0, 5),  //设置文本标注偏移量
        content:info.join("<br/>"), //设置文本标注内容
        direction: 'top' //设置文本标注方位
    });

        var infoWindow;
        infoWindow = new AMap.InfoWindow({
            content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
        });
        infoWindows.push(infoWindow)

    }
    // 创建覆盖物群组，并将 marker 传给 OverlayGroup
    var overlayGroups = new AMap.OverlayGroup(markers);
    map.add(overlayGroups);


   var marker1 = new AMap.Marker({
        map: map,
        icon: "./1635823163.png",
        //animation:"AMAP_ANIMATION_BOUNCE",
        position: [113.167333,22.951149]
    });
    marker1.setLabel({
        //offset: new AMap.Pixel(0, 5),  //设置文本标注偏移量
        content:"潭洲会展中心", //设置文本标注内容
        direction: 'top' //设置文本标注方位
    });


 var marker2 = new AMap.Marker({
        map: map,
        icon: "./1635822731.jpg",
        //animation:"AMAP_ANIMATION_BOUNCE",
        position: [113.141612,22.959234]
    });
    marker2.setLabel({
        //offset: new AMap.Pixel(0, 5),  //设置文本标注偏移量
        content:"佛山国际体育文化演艺中心", //设置文本标注内容
        direction: 'top' //设置文本标注方位
    });


function showInfoM(e){
        //console.log(lnglats[e.target.content]);
        //infoWindows[e.target.content].open(map, lnglats[e.target.content]);

        //infoWindows[e.target.content].open(map, [113.130491,22.96615]);
    }
// marker.on('click', showInfoM);

// var infoWindow;
//     //在指定位置打开信息窗体
// function openInfo() {
//         //构建信息窗体中显示的内容
//         var info = [];
//         info.push("<div style=\" background-color:#1296db;color:white;  \"  ");
//         info.push("酒店 :佛山新城保利洲际酒店 ");
//         //info.push("联系电话 : 13824922992");
//         info.push("地址 :佛山顺德区乐从镇东平新城文华南路8号</div>");
//         infoWindow = new AMap.InfoWindow({
//             content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
//         });

//         infoWindow.open(map, [113.130491,22.96615]);

//     }
//     openInfo();


</script>

<style>
.amap-info-content{
    background:#1296db !important;
}
.amap-marker-label{
padding: 0px !important;
border:0px !important;
}


</style>
</body>
</html>