前端嵌入高德地图

最新推荐文章于 2025-02-23 15:20:17 发布

githubcurry

最新推荐文章于 2025-02-23 15:20:17 发布

阅读量4.5k

点赞数 10

分类专栏：前端文章标签：高德地图地图前端地图地图展示

本文链接：https://blog.csdn.net/weixin_45277161/article/details/123249489

版权

前端专栏收录该内容

26 篇文章

订阅专栏

操作步骤

首先需要去申请一个key，直接在控制台添加就好了，链接
页面中合适的位置创建一个div，并有一个id
使用上面div的id创建一个map对象，导入相应的js链接和key值，链接
图面显示出地图，链接
地图上有一些插件可以使用，链接

效果图

在这里插入图片描述

code

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
        body,
        html,
        #meMap {
            width: 100%;
            height: 100%;
            margin: 0px
        }
    </style>
    <title>简单地图加载</title>
</head>

<body>
    <div id="meMap" tabindex="0"></div>
    <script src="https://webapi.amap.com/maps?v=1.4.2&key=58a21c1753060ec67806dab865753535"></script>
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
    <script type="text/javascript">
        var map = new AMap.Map('meMap', {
            resizeEnable: true,
            center: [122, 35.88989],
            zoom: 15,
            viewMode: '3D' //使用3D视图
        });
        AMap.plugin('AMap.ToolBar', function() {
            var toolbar = new AMap.ToolBar();
            map.addControl(toolbar)
        });

        var marker = new AMap.Marker({
            position: map.getCenter(), //标记的位置坐标
            offset: new AMap.Pixel(-5, -5), //标记相对位置的偏移，对应style的left和top
            icon: ico, //创建好的icon，也可以在后面使用setIcon()方法添加
            zoom: 13
        });

        marker.setTitle("当前的位置");
        marker.setLabel({
            offset: new AMap.Pixel(10, 30),
            content: "当前的位置"
        });

        var ico = new AMap.Icon({
            size: new AMap.Size(24, 30), // 图标尺寸
            image: 'static/333.jpeg', // Icon的图像
            imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(24, 30) // 根据所设置的大小拉伸或压缩图片，对应style的width和height
        });

        map.add(marker); //将创建好的marker放到地图上面
    </script>
</body>
</html>