高德地图初学，如何获取key，简单实例，附github地址（二）

最新推荐文章于 2024-06-27 16:37:42 发布

旧风年间

最新推荐文章于 2024-06-27 16:37:42 发布

阅读量478

点赞数

分类专栏：高德地图文章标签：高德地图

本文链接：https://blog.csdn.net/weixin_41637749/article/details/82882652

版权

本文介绍了如何获取高德地图的API Key，并提供了包含多个实用功能的简单实例，如加载地图。示例代码包括gaodeMap2.html和gaodeMap2.js。项目源代码已上传至GitHub，链接：https://github.com/1571312541/gaodeMap。

摘要由CSDN通过智能技术生成

上篇文章非常简单，代码复制出来就能出地图

这篇将增加很多小功能

直接上代码

gaodeMap2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高德地图</title>
    <script src="../../resources/jquery-1.11.1.min.js"></script>
    <!--AMap.AdvancedInfoWindow 信息窗体插件-->
    <!--AMap.Geocoder 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换-->
    <!--AMap.PlaceSearch 地点搜索服务插件，提供某一特定地区的位置查询服务-->
    <script src="https://webapi.amap.com/maps?v=1.4.10&key=a8e3f1d526511281bac2edf977a6ca03&plugin=AMap.AdvancedInfoWindow&plugin=AMap.Geocoder&plugin=AMap.PlaceSearch"></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
</head>
<style type="text/css">
    .info-title {
        color: white;
        font-size: 14px;
        background-color:blue;
        line-height: 26px;
        padding: 0px 0 0 6px;
        font-weight: lighter;
        letter-spacing: 1px
    }
    .info-content {
        font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
        padding: 4px;
        color: #666666;
        line-height: 23px;
    }
    .info-co