vue引入高德地图定位+拖拽选址+搜索定位

最新推荐文章于 2025-10-15 17:10:02 发布

原创

最新推荐文章于 2025-10-15 17:10:02 发布 · 3.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #开发语言

这篇博客详细介绍了如何在Vue项目中集成高德地图API，包括申请API key、引入地图库、配置Webpack、创建地图加载器、在组件中使用地图以及实现地图功能如经纬度定位、地址搜索和拖拽定位。同时，提供了相应的代码示例，帮助开发者实现地图展示和交互功能。

接地图步骤：

准备工作
step1：安装依赖；cnpm install vue-amap --save 引入AMap
申请key：在高德地图开放平台https://lbs.amap.com/dev/key/app控制台-应用管理-我的应用-新增应用，申请一个key

1、在index.html里引入

<script src="//webapi.amap.com/maps?v=1.4.13&key=3764a11b28b71df809bdb998a9bb6278"></script>

<script src="//webapi.amap.com/ui/1.0/main.js"></script>

2、在vue cli2.0版本情况下
在build文件夹下的webpack.base.config.js配置,写在"module.exports={}’'里最底下，与"entry{}"平级

在vue cli3.0版本情况下
在vue.config.js配置,写在"module.exports={}“里配置
configureWebpack: {
externals: {
'AMap': 'AMap',
'AMapUI': 'AMapUI'
}
},

3、在assert文件夹里新建一个AMap.js：
export default function MapLoader () {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=3764a11b28b71df809bdb998a9bb6278 '
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}

4、在使用了用地图的组件中引入AMap，
import AMap from 'AMap'
import MapLoader from '../../../assets/AMap.js';

5、地图vue代码：
<template>
<a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<div style="height:600px;border:1px solid #dddddd;">
<p style="background-color: #eff5ff;padding: 8px;color: #01AAED;font-size: 16px">经纬度设置,找到位置,点击确定即可</p>
<div id="all" style="height:100%">
<div class="posInput">
<a-input-search style="width:100%"
id="tipinput"
class="form-control input-style"
type="text"
placeholder="请输入搜索地址"
v-model="MapAdress"
&nb