前端调用高德地图的接口

最新推荐文章于 2023-04-19 10:38:45 发布

原创

最新推荐文章于 2023-04-19 10:38:45 发布 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#地图 #前端

本文详细讲解如何在前端项目中集成并使用高德地图的接口，包括地图加载、定位、标记等核心功能，助你实现交互丰富的地图应用。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=7f3b04e41812fc230bf64bc4bf0b40e7"></script>
    <!--  异步版本 ui组件, 用于添加城市信息 -->
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <!-- <script src="//webapi.amap.com/ui/1.0/main-async.js"></script> -->
    <!-- 移动端开发时, 添加以下内容 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
</head>
<style>
    #container {
        width: 600px;
        height: 480px;
        display: inline-block;
    }
    #container1 {
        width: 600px;
        height: 480px;
    }
    #right{
        float: left;
        margin-top: 40px;
    }
</style>

<body>
    <!-- 先在开发者页面创建应用,申请key, 然后使用 -->
    <!-- 高德教程地址  https://lbs.amap.com/api/javascript-api/guide/abc/plugins#plugins -->

    <!-- 选择城市教程
        https://lbs.amap.com/api/webservice/guide/api/district -->
    <div id="container"> </div>
    <div id='right'>
        <div>
            <div class='title'>选择模式</div>
            <input type='radio' name='mode' value='dragMap' checked>拖拽地图模式</input>
            <!-- </br> -->
            <input type='radio' name='mode' value='dragMarker' checked>拖拽图标模式</input>
        </div>
        <div>
            <button id='start'>开始选点</button>
            <button id='stop'>关闭选点</button>
        </div>
        <div>
            <div class='title'