前言

最近在vue里使用了高德地图vue-amap以及AMapUI,我在这里就说下如何在vue2里引入vue-amap和AmapUI以及使用定位

(在这里默认你已经安装了vue-cli)

安装
npm install vue-amap --save
在main.js引入vue-amap

在main.js添加如下几行

// 引入vue-amap
import AMap from 'vue-amap';

Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
    // 申请的高德key
    key: '你的key值',
    // 插件集合
    plugin: ['AMap.Geolocation',....],
    uiVersion: '1.0'  //添加 uiVersion 的脚本版本号
});

引入高德 UI 组件库,如上,只需在初始化的时候添加 uiVersion 的脚本版本号,就能轻松完成脚本的加载及初始化,版本号参考官方介绍

新建一个map组件

新建一个map.vue文件

<template>
  <div id="near">
    <div id="amap-main">
    </div>
  </div>
</template>
<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap';
var map
export default{
  name:'near',
  data () {
    return {
      localData:{}
    }
  },
  mounted() {
    let self = this
    lazyAMapApiLoaderInstance.load().then(() => {
        //初始化地图
        map = new AMap.Map('amap-main', {
          resizeEnable: true,
          zoom: 20,
          center: new AMap.LngLat(113.309213,23.146569)
        });
            //这个是添加AMapUI的点标注
         AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => {
            const marker = new SimpleMarker({
              iconLabel: 'A',
              iconStyle: 'red',
              color:"#fff",
              map: map,
              position: [113.309213,23.146569],
            });
          });
      //使用定位
      map.plugin('AMap.Geolocation', function() {
          let geolocation = new AMap.Geolocation({
              enableHighAccuracy: true,//是否使用高精度定位,默认:true
              timeout: 10000,          //超过10秒后停止定位,默认:无穷大
              buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
              zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
              buttonPosition:'RB'
          });
          map.addControl(geolocation);
          geolocation.getCurrentPosition();
          AMap.event.addListener(geolocation, 'complete', self.onComplete);//返回定位信息
      });
    });
  },
  methods: {
      onComplete (data) {
        //里面为定位的信息
         this.localData = data
      }
  }

}
</script>
<style lang="scss">
#near{
  width:100%;
  height:100%;
  #amap-main{
    width:100%;
    height:100%;
  }
}
</style>

然后引用map.vue组件你就会发现成功出现地图并且有个名字为A的点标注

vue2使用高德地图vue-amap定位以及AMapUI标注的更多相关文章

  1. 使用高德地图SDK获取定位信息

    使用高德地图SDK获取定位信息 第一步: 在高德官网下载SDK,如我这里需要获取定位信息,故仅下载"定位功能" 第二步: 注册成为开发者,并创建应用获取相应的key.其中,在使用A ...

  2. Android 编程 AMapLocationClientOption 类中的 setNeedAddress 方法用处 (高德地图 com.amap.api.location.AMapLocationClientOption 中的类)

    最近在用高德地图来写Android App, 其中有一些 方法是不太理解的,这里写一下 对  高德地图  com.amap.api.location.AMapLocationClientOption ...

  3. android 高德地图出现【定位失败key鉴权失败】

    如题:android 高德地图出现[定位失败key鉴权失败] 原因:使用的是debug模式下的SHA1,发布的版本正确获取SHA1的方式见: 方法二使用 keytool(jdk自带工具),按照如下步骤 ...

  4. (高德地图)marker定位 bug 解决总结

    项目背景: 一个项目bug,项目中用到高德地图,默认打开页面会生成一个marker(下图红色icon),然后用户拖动marker到想要的位置,并且保存. 用户反映定位不准确,在当前页面编辑的位置,到后 ...

  5. 安卓开发笔记①:利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边(位置)

    高德地图开发时需要导入的包在下面的网盘链接中:(由于高德地图api更新得太快,官网上最新的包使用起来没有之前的方便,所以以下提供最全面的原始包) 链接:http://pan.baidu.com/s/1 ...

  6. Android 编程 AMapLocationClientOption 类中的 setMockEnable (高德地图 com.amap.api.location.AMapLocationClientOption 中的类)

    setMockEnable 高德地图中 AMapLocationClientOption 中有一个方法是设置APP是否接受模拟定位的设置,就是方法 setMockEnable //设置是否允许模拟位置 ...

  7. web开发如何使用高德地图API(一)浏览器定位

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  8. react项目中引用amap(高德地图)坑

    最近在写一个react项目,用到了需要定位的需求,于是乎自己决定用高德地图(AMap),但是react官方文档的案列很少,大多都是原生JS的方法. 在调用amap的 Geocoder Api 时,一直 ...

  9. 微信小程序-基于高德地图API实现天气组件(动态效果)

    微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...

随机推荐

  1. Codeforces 839C Journey【DFS】

    C. Journey time limit per test:2 seconds memory limit per test:256 megabytes input:standard input ou ...

  2. [bzoj 2017] [Usaco2009 Nov]硬币游戏

    一个多月没更博客了..(期间明白了自己有多傻逼. 这种问题大概就倒着做... f[i][j]:表示考虑剩下的硬币i..n,且之前的人取了j个时,先手最多拿到的钱数.aft[i]:表示硬币i..n的总钱 ...

  3. NEFU_117素数个数的位数

    题目传送门:点击打开链接 Problem : 117 Time Limit : 1000ms Memory Limit : 65536K description 小明是一个聪明的孩子,对数论有着很浓烈 ...

  4. java小入门的感觉

    工作两三年,.NET与Java都干过,也都是应付差事,用着现有的框架,现有的规范,实现简单的功能,有余力的情况下,看看框架中的代码,欣赏一下前辈们的心血,居然在单位也算有心的了?! 最近的JAVA项目 ...

  5. [国嵌攻略][065][DM9000驱动程序设计]

    移植代码:通过已有的可用的代码修改到新环境下运行. 代码编写: 初始化网卡 1.选中网卡 nLAN_CS BWSCON(0x48000000) DW4:01 16bit BANKCON4(0x4800 ...

  6. UE4 保存为bitmap

    TArray<FColor> colorData;    colorData.Init(FColor(0, 0, 255, 255), 1920 * 1080);    for (int ...

  7. CSS3技巧巧妙使用:not(:last-of-type)简化你的css代码

    终于找到了一个好方法,使用:not(:last-of-type)简单方便,再也不要麻烦的单独使用:last-of-type了,不错! 应用场景:平时我们的列表一般都会有分割线,但是最后一个列表没有分割 ...

  8. Centos6.7安装mysql 5.6简单教程

    今天项目经理让我给服务器配一下mysql,以前配置mysql的时候,感觉好麻烦,前几天也帮朋友配置来着,今天装的时候一直报错,百度也没搞明白,所以打算换种方法装mysql,无意中发现了还有这种操作,容 ...

  9. vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...

    http://blog.csdn.net/sophie_u/article/details/76223978 以在vue中引入mui第三方库为例: 虽然针对vue,有单独的vue-mui库可以使用,但 ...

  10. 《HelloGitHub》第 22 期

    公告 年前最后一期,下次就是年后了,老时间 每月的 28 号,年后见- <HelloGitHub>第 22 期 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 G ...