vue使用高德地图（原生HTML的使用以及父子页面的传参和方法调用）

最新推荐文章于 2025-01-09 17:24:13 发布

原创

最新推荐文章于 2025-01-09 17:24:13 发布 · 981 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #前端

本文介绍了如何在Vue项目中通过原生HTML引入高德地图，以解决Vue页面更新导致的地图坐标问题。首先，详细说明了如何创建HTML文件并引入高德地图API实现地图展示和点击弹窗功能。然后，利用iframe标签在Vue页面中嵌入地图，并解释了iframe的使用。最后，探讨了Vue组件中通过iframe实现父子页面之间的通信，包括将子页面JS代码封装为函数挂载到window上，以及父子页面间的方法调用和参数传递。

前言：本人最初使用的是vue代码引用的高德地图，测试的时候由于vue页面会实时更新页面，所以当拖动，缩小放大地图时地图上的坐标点会跟着一起移动而不是相对地图固定的这给用户体验带来很不好的效果

所以后来改用原生html加高德api开发

一，如何在vue中引入引入高德地图（原生HTML实现）

首先在vue项目静态文件中创建一个html文件，引入高德地图的使用（代码片段如下）

注意：下方实列代码的效果实现效果是地图上展示多个点位信息并且点击标点出现信息弹窗

申请的key值：在高德地图开发文档中申请自己的key 准备-入门-教程-地图 JS API v2.0 | 高德地图API

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>给多个点添加信息窗体</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script