前端vue如何使用高德地图


Posted in Javascript onNovember 05, 2020

首先,注册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" rel="external nofollow" >
  <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如何使用高德地图

以上就是前端vue如何使用高德地图的详细内容,更多关于vue 高德地图的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 #Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 #Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 #Javascript
Array.filter中如何正确使用Async
Nov 04 #Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 #Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 #Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 #Javascript
You might like
收音机术语解释
2021/03/01 无线电
几个php应用技巧
2008/03/27 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
5 cool javascript apps
2007/03/24 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
一些PHP的面试题
2015/05/06 面试题
两则小学生的自我评价分享
2013/11/14 职场文书
毕业自我鉴定书
2014/03/24 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
保密工作整改报告
2014/11/06 职场文书
退休职工欢送会致辞
2015/08/01 职场文书