高德地图点击折线显示信息窗体解决方案

最新推荐文章于 2024-05-13 15:52:37 发布

ToopRookie

最新推荐文章于 2024-05-13 15:52:37 发布

阅读量1.5k

点赞数 1

分类专栏：高德地图 Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_36864012/article/details/108084691

版权

本文介绍了如何在Vue.js项目中使用高德地图API，通过初始化地图和设置点击事件，实现在点击折线时弹出信息窗体展示详细数据。详细过程包括获取高德地图API key，配置项目文件，以及解析点击事件中的extData数据来生成信息窗体。

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

高德地图入门

首先注册高德地图账号，登陆后在主页进入后台应用管理
在应用管理-我的应用中创建新应用，然后点击添加，一次填写key名称、服务平台，提交后会生成key值，用于高德的js开发

初始化地图并实现点击折线实现信息窗体

这一部分参考高德JS API开发文档，一下是vue项目中主要的几个配置文件
1.public/index.html

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值"></script>
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
  </head>

该页面为public文件夹下的主页
2.vue.config.js

module.exports = {
   
    devServer: {
   
        port: 57103 // 端口号配置
    },
    configureWebpack: {
   
        externals: {
   
            'AMap': 'AMap' // 高德地图配置
        }
    }
}