POI 详情

使用 poiOnAMAP 调起高德地图 POI详情

源代码编辑器

复制

运行

还原

          <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>POI详情页</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,body,#container{
            height:100%;
        }
        .marker{
            width:22px;
            height:36px;
            background-image:url(https://webapi.amap.com/theme/v1.3/markers/b/mark_b.png);
            background-size: 22px 36px;
            text-align: center;
            line-height: 24px;
            color: #fff
        }
    </style>
</head>
<body>
    <div id="container" ></div>
    <div class="info"  style='min-width:10rem;'>
        <img src="//a.amap.com/lbs/static/img/js-poisearch.png" style='width:120px;height:120px'>
        <div style='text-align: center'>手机扫码打开示例</div>
    </div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.ToolBar"></script>
    <script>
        var map = new AMap.Map("container", {
            zoom: 18,
            center:[116.473188,39.993253]
        });
        AMap.plugin('AMap.PlaceSearch',function(){
            var placeSearch = new AMap.PlaceSearch({
                city:'010',
                pageSize:5
            })
            placeSearch.search('博物馆',function(status,data){
                if(status!=='complete')return;
                var pois = data.poiList.pois;
                for(var i=0;i<pois.length;i+=1){
                    var marker = new AMap.Marker({
                        content:'<div class="marker" >'+i+'</div>',
                        position:pois[i].location,
                        map:map,
                        label: {
                            offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
                            content: pois[i].name
                        }
                    });
                    marker.id= pois[i].id;
                    marker.name = pois[i].name;
                    marker.on('click',function(){
                        map.poiOnAMAP({
                            name:this.name,
                            location:this.getPosition(),
                            id:this.id
                        })
                    })
                }
                map.setFitView();
            })
        })
        map.addControl(new AMap.ToolBar());
        if(AMap.UA.mobile){
            document.getElementsByClassName('info')[0].style.display='none';
        }
    
        //PlaceSearh插件同样支持poiOnMap与detailOnAMAP方法
    </script>
</body>
</html>
        

控制台

清空

示例
中心常见
问题智能
客服