<!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>