首先，注册Key

　1、注册开发者账号，成为高德开放平台开发者

2、登陆之后，在进入「应用管理」 页面「创建新应用」

　3、为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

然后，书写代码

在vuecli  public文件夹中的index.html添加导入 JS API 的入口脚本标签

<!DOCTYPE html>

<html lang="en">

<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="./iconLink.png">

    <title>高德地图</title>
　　　 <!-- 建议将导入的script写在body前面，以便提前加载 -->
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=2.0&key=d6c35bb2619f107f86ccda4b378415f6&plugin=AMap.MouseTool"></script> <!-- 只是我的key，可以暂时用为测试（不定什么时候失效） -->
　　 <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script> <!-- 高德官方文档的ui库 --> </head> <body> <div id="app"></div> </body>


</html>

在vue.config.js中修改配置

module.exports = {

    publicPath: "./",

    configureWebpack: {

        externals: {

            AMap: 'window.AMap',

            AMapUI: 'window.AMapUI' // 高德地图配置

        },

    }

};

接下来，正式书写vue组件

废话不多说，直接上代码

<template>

    <div class="map_wrapper">

        <div class="box">

            <div id="container" style="width: 100%; height: 500px"></div>

        </div>

    </div>

</template>

<script lang="ts">

import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

@Component({

})

export default class page extends Vue {
　　 // 使用 import AMap from 'amap'; 会有编辑器报错Cannot find module 'amap'; 所以变通换一种写法

    protected AMap: any = (window as any).AMap;

    protected AMapUI: any = (window as any).AMapUI;


　　 // 如果写在created会报错 "Error: Map container div not exist"

    mounted() {

            let map = new this.AMap.Map('container', {

                center: [121.227577, 31.101471], // 中心点坐标

                resizeEnable: true, // 是否监控地图容器尺寸变化

                zoom: 10, // 初始化地图层级，可以理解为缩放比例

                showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true

            });

            //加载SimpleInfoWindow，loadUI的路径参数为模块名中 'ui/' 之后的部分

            this.AMapUI.loadUI(['overlay/SimpleInfoWindow'], (SimpleInfoWindow: any) => {

                let marker = new this.AMap.Marker({

                    map: map,

                    zIndex: 9999999,

                    position: map.getCenter(),

                });

                let infoWindow = new SimpleInfoWindow({

                    infoTitle: '<strong>这里是标题</strong>',

                    infoBody: '<p>这里是内容。</p>',

                    offset: new this.AMap.Pixel(0, -31),  // 文本定位偏移

                });

                //显示在map上

                function openInfoWin() {

                    infoWindow.open(map, marker.getPosition());

                }

                marker.on('click', () => {

                    openInfoWin();  // 点击标记时显示文本

                });

                openInfoWin();

            });

    }

}

</script>

<style scoped lang="scss"></style>

页面效果如下

前端vue使用高德地图的更多相关文章

  1. vue调用高德地图：vue-amap

    前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下, ...

  2. vue集成高德地图

    vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...

  3. vue 调用高德地图

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...

  4. vue 使用高德地图vue-amap组件

    首先    npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use ...

  5. vue 引用高德地图

    vue 引用地图之傻瓜式教程(复制粘贴即可用) npm 下载 npm install vue-amap --save main.js 代码 import AMap from 'vue-amap'; V ...

  6. vue 高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链 ...

  7. 基于vue 2.X和高德地图的vue-amap组件获取经纬度

    今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...

  8. VUE 高德地图选取地址组件开发

    高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key &l ...

  9. vue中使用vue-amap（高德地图）

    因为项目要求调用高德地图,就按照官方文档按部就班的捣鼓,这一路上出了不少问题. 前言: vue-cli,node环境什么的自己安装设置推荐一个博客:https://blog.csdn.net/wula ...

随机推荐

  1. what's the difference amount of pdf, epub, and mobi format

    what's the difference amount of pdf, epub, and Mobi format What is the difference between pdf, epub ...

  2. How to use JavaScript to implement precise setTimeout and setInterval

    How to use JavaScript to implement precise setTimeout and setInterval 如何使用 JavaScript 实现精确的 setTimeo ...

  3. iPad Pro 如何通过 USB-C 接口外接机械键盘

    iPad Pro 如何通过 USB-C 接口外接机械键盘 外接机械键盘 Type-C Dock OK,cnblogs 图片文件不能超过20M https://support.apple.com/zh- ...

  4. virtual scroll list / dynamic dom list

    virtual scroll list / dynamic dom list 虚拟滚动列表 1亿条数据的处理渲染方法 时间分片,不阻塞 DOM web workers 后台进程 Array buffe ...

  5. 宝塔部署Nestjs

    1. 在宝塔上下载pm2 2. 打包你的服务端代码 "npm run build && cp ./package.json ./dist/" 3. 在宝塔文件&qu ...

  6. ES进行date_histogram时间聚合，聚合结果时间不正确问题

    在做项目中,有一个需求是统计本周内每天的漏洞数量,我选用的是ES中的date_histogram函数来进行聚合统计: 但是出现了一个问题,聚合出来的结果和想要统计的结果时间不一致,如下图所示 时间区间 ...

  7. CNN专访灵石CTO：Baccarat流动性挖矿能否持续？

    近日,CNN记者Robert独家专访Baccarat的项目团队CTO STEPHEN LITAN,跟他特别聊了聊DeFi的近况. 以下是专访全文: Robert:推出Baccarat的契机是什么? S ...

  8. CodeMirror动态修改代码（关键： editor.getDoc().setValue(data); editor.refresh();）

    在使用codemirror时,其原理是根据form中的textarea标签,自动加载其内容,获得代码行的显示.(具体使用方式参见 codemirror官网使用手册 http://codemirror. ...

  9. 按键显示器（判断键盘监听器获得的值为普通Key还中modifiers)

    1 import sys 2 from PyQt5 import QtWidgets,QtCore 3 from PyQt5.QtCore import Qt 4 from PyQt5.uic.pro ...

  10. GET和POST两者的区别

    GET 和 POST 是 HTTP 协议中的两种发送请求的基本方法,对于前端开发者而言,几乎每天都在使用它们,再熟悉不过了,一般也都能说出几点两者的区别. 如果面试中被问到这个问题,先回答一下几点,肯 ...