vue高德地图H5定位及城市选择器控件实现详细教程

置顶

钥零零

已于 2023-04-10 10:27:59 修改

阅读量8k

点赞数 10

CC 4.0 BY-SA版权

分类专栏：周边组件 Vue 文章标签： javascript vue.js html5 高德地图城市选择器

于 2021-09-30 09:21:37 首次发布

本文链接：https://blog.csdn.net/qingmuzhang/article/details/120560347

本文是一篇关于如何在Vue项目中使用高德地图JS API实现H5定位和城市选择器功能的详细教程。首先介绍了如何注册成为高德地图开发者并获取API Key，然后在Vue项目中配置地图API和城市选择器UI库。接着讲解了定位功能的实现，以及如何创建和定制城市选择器，包括设置自定义主题和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人博客地址：https://qingmuzhang.gitee.io/

需求说明：H5实现初始化通过高德地图进行定位城市，用户也可以自行点击选择其他城市

主要功能点：定位、城市选择器

实现效果
在这里插入图片描述

一、初始准备

这里采用高德地图 JS API去实现上述两项功能，使用高德地图 JS API 开发地图应用需要先注册账号并申请Key,https://lbs.amap.com/api/javascript-api/guide/abc/prepare

首先，注册开发者账号，成为高德开放平台开发者，地址 https://console.amap.com/dev/id/choose

在这里插入图片描述

这里我选择的个人开发者，只需要手机号认证即可创建，后续有需求可以选择企业开发者。

登陆之后，在进入「应用管理」页面「创建新应用」
为应用添加 Key，「服务平台」一项选择「 Web 端 ( JSAPI ) 」
添加后点击可以查看新生成的key，将其复制添加到项目中

二、Vue项目初始配置

在main.html页面添加 JS API 的入口脚本标签，并将其中key值=刚刚申请的 key，由于还使用到高德的城市选择器组件，所以还需要引入ui组件库

<!--引入高德地图JSAPI -->
<script src="//webapi.amap.com/maps?v=2.0&key=申请的key"></script>
<!--引入UI组件库（1.1版本） -->
<script src="//webapi.amap.com/ui/1.1/main.js"></script>

在webpack.base.conf.js中加入

module.exports = {
     
     
	  externals: {
     
     
        'AMap': 'AMap',
        'AMapUI': 'AMapUI'
    },
}

三、定位功能实现

https://lbs.amap.com/api/javascript-api/reference/location

import AMap from 'AMap'; //在页面中引入高德地图
methods:{
   
   
	//定位
    getLocation() {
   
   
        const self = this
        AMap.plugin('AMap.Geolocation', function () {
   
   
            var geolocation = new AMap.Geolocation({
   
   
                // 是否使用高精度定位，默认：true
                enableHighAccuracy