html接入高德地图

1.申请key

key申请地址:https://console.amap.com/dev/key/app

官方文档

https://lbs.amap.com/api/javascript-api-v2/summary

2.html接入示例

  • 需要将YOUR_KEY替换成自己的key
html 复制代码
<!doctype html>
<html>
<head>
  <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>高德地图demo</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      height: 100%;
      width: 100%;
    }

    .amap-icon img,
    .amap-marker-content img {
      width: 25px;
      height: 34px;
    }

    .cus_info_window {
      background-color: #fff;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY"></script>
  <script type="text/javascript">
    // 创建地图实例
    var map = new AMap.Map("container", {
      zoom: 18,
      center: [104.70049, 29.422945],
      resizeEnable: true
    });

    // 创建点覆盖物
    var marker = new AMap.Marker({
      position: new AMap.LngLat(104.70049, 29.422945),
      icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
      offset: new AMap.Pixel(-13, -30)
    });
    map.add(marker);
	
	// 创建信息窗体
    var infoWindow = new AMap.InfoWindow({
      isCustom: true,  // 使用自定义窗体
      content: '<div class="cus_info_window">世界无花果博览园</div>', // 信息窗体的内容可以是任意 html 片段
      offset: new AMap.Pixel(16, -45)
    });
    var onMarkerClick = function (e) {
      infoWindow.open(map, e.target.getPosition()); // 打开信息窗体
      // e.target 就是被点击的 Marker
    }

    marker.on('click', onMarkerClick); // 绑定 click 事件
  </script>
</body>

</html>
相关推荐
我要洋人死17 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人28 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人29 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR34 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香36 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969339 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai44 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#