操作步骤

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

效果图

在这里插入图片描述

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>
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

PHP与人工智能：结合案例与可能性探索

avatar 讯飞AI开发者社区
cover

[论文阅读] 人工智能 + 软件工程 | 真实场景下GitHub Copilot生产力之谜：2年数据揭示客观提交无提升，开发者却直呼“好用”

avatar 讯飞AI开发者社区

上下文工程驱动智能体向 通用人工智能

例如在文章开头，我们举的产品经理和工程师之间的那一段对话，一个高质量智能体，不再只是让大模型回答用户的问题，而是通过上下文工程，帮助大模型在回答前获得更加结构化的输入，包括项目状态、需求文档、任务历史、甚至团队氛围，实现大模型更好的理解当前的任务规划、团队过往的沟通隐患、对方的工作状态与担忧、文档/知识库的实时状态等等。这和我们维护我们手机上内存很像，一开始所有应用和历史信息都保留，但当手机出现运

avatar 讯飞AI开发者社区