高德地图HTML

最新推荐文章于 2024-05-19 22:05:56 发布

小基炖蘑菇·

最新推荐文章于 2024-05-19 22:05:56 发布

阅读量201

点赞数

分类专栏：前端文章标签：街景地图

本文链接：https://blog.csdn.net/xiaodongbai/article/details/117952535

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏


<div>
 <a href="#">
<div id="container" style="height:100%"></div>
</a>
</div>



<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.12&key=#####'></script>
<!-- UI组件库 1.0 -->
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    //创建地图
    //经纬度
    var local =$('#local').text();
    var ss = local.split(",")//转化为数组
    var map = new AMap.Map('container', {
        zoom:14,
        // center: ss,
        center:[117.166731,34.229953]
    });


    AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {

        var marker = new AMap.Marker({
            map: map,
            zIndex: 9999999,


            position: map.getCenter()
        });
        // var adds =$('#adds').text();
        var infoWindow = new SimpleInfoWindow({
            //模板, underscore
            infoTitle: '<strong><%- title %></strong>',
            infoBody: '<p class="my-desc">' +
                //<%= 原值插入 ..
                '<%= img %>' +
                //<%- html编码后插入
                '<%- body %>' +
                '</p>',
            //模板数据
            infoTplData: {
                title: '徐州金山公园',
                img: '<img src="https://webapi.amap.com/theme/v1.3/autonavi.png" /><br/>',
                body: '徐州金山公园徐州金山公园',
            },

            //基点指向marker的头部位置
            offset: new AMap.Pixel(0, -31)
        });

        function openInfoWin() {
            infoWindow.open(map, marker.getPosition());
        }

        //marker 点击时打开
        AMap.event.addListener(marker, 'click', function() {
            openInfoWin();
        });

        openInfoWin();
    });
</script>