vue2(webpack)调用amap高德地图及其UI组件

vue2(webpack)调用amap高德地图及其UI组件和标记物

今天一个app项目中要使用vue2加入高德地图,本来以为有第三方的插件,结果没找到适合自己用的,因为地图这块,一般都是自定义程度比较高的。注:这块针对的是app版开发,更多更详细请阅读官方api,有问题请在下方评论,或者加群讨论QQ群:128806068

1、申请key

点击下边的网址,创建应用,然后申请key,后期要用到,如果已经有key,忽略这一步 http://lbs.amap.com/dev/key/app

2、修改配置

首先要在build/webpack.base.conf.js 加入如下配置,负责vue中使用import会报错。 如果如下导入还AMap报错,请使用window.AMap。因为后边要使用高德的infowindow,最简单的不好扩展,而且没有点击事件,所以用用到了高德的ui。位置见下图

  externals: {
    'AMap': 'AMap',
    'AMapUI': 'AMapUI'
  }

3、调用高德地图

  • 首先在index.html中加入如下引用
<!--引入高德地图JSAPI -->
<script src="//webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

<!--引入UI组件库(1.0版本) -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
  • 新建一个map.vue组件

在script中引入如下组件,如果第二步不配置,这里会报错

import AMap from 'AMap'
import AMapUI from 'AMapUI'

注意:

如果前边都操作了,import AMap还报错undefined的话,有个终极大招,那就是直接加入如下注释,并且把 import AMap 删除掉,意思是告诉eslint忽略这块的检查,因为在index.html引入是全局引入,所以可以直接使用。

template中加入map的div,注意如果map不显示,没报错的时候,请检查div的宽高。

<div id="map-container"> </div>

然后再mounted中初始化地图,这时候地图就会显示出来了,但是没有任何组件,注意vue2废弃ready,请使用mounted。代码位置不懂的看图片

<!--创建地图 -->
let mapObj = new AMap.Map('map-container', {
          center: [117.000923, 36.675807],
          zoom: 6
        })

两个组件:放大缩小按钮和图层的切换

mapObj.plugin(['AMap.ToolBar', 'AMap.MapType'], function () {
  mapObj.addControl(new AMap.ToolBar())
  mapObj.addControl(new AMap.MapType({showTraffic: false, showRoad: false}))
        })

使用高德定位

mapObj.plugin(['AMap.Geolocation'], function () {
          let geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //  是否使用高精度定位,默认:true
            timeout: 10000, //  超过10秒后停止定位,默认:无穷大
            maximumAge: 0, // 定位结果缓存0毫秒,默认:0
            convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true
            showButton: true, //  显示定位按钮,默认:true
            buttonPosition: 'LB',  // 定位按钮停靠位置,默认:'LB',左下角
            buttonOffset: new AMap.Pixel(10, 20), //  定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
            showMarker: true, //  定位成功后在定位到的位置显示点标记,默认:true
            showCircle: true, //  定位成功后用圆圈表示定位精度范围,默认:true
            panToLocation: true,  //  定位成功后将定位到的位置作为地图中心点,默认:true
            zoomToAccuracy: true  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
          })
          mapObj.addControl(geolocation)
          geolocation.getCurrentPosition()
          AMap.event.addListener(geolocation, 'complete', (result) => {
            mapObj.setCenter(result.position)
          })  //  返回定位信息
          AMap.event.addListener(geolocation, 'error', (result) => {
            console.log(result)
          })  //  返回定位出错信息
        })

4、地图添加标记物和信息框 marker和infowindow

因为我从后台取到的点是gps定位的点,因为坐标系不同,所以要将gps的点转成高德坐标系的点;点击marker显示infowindow,并给infowindow添加点击事件

          // 后台取到的点,新建LngLat对象
          let lngLat = new AMap.LngLat(lanlet[0].trim(), lanlet[1].trim())
          // 转高德坐标系
          AMap.convertFrom(lngLat, 'gps', function (info, result) {
            lngLat = result.locations[0]// 转换后的坐标位置
            var marker = new AMap.Marker({
              position: lngLat,
              map: mapObj
            })
            AMap.event.addListener(marker, 'click', (e) => {
              AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) {
                var infoWindow = new SimpleInfoWindow({
                  infoTitle: '<strong>这是标题</strong>',
                  infoBody: '<p>这是信息</p>',
                  offset: new AMap.Pixel(0, -20),
                  autoMove: true
                })
                infoWindow.open(mapObj, e.target.getPosition())
                // 最坑的就是这一步了,他的infowindow没有点击事件,所以infoWindow.get$Container()会返回这个infowindow(jquery)对象
                let infoEle = infoWindow.get$Container()
                //给infowindow添加点击事件,并在回调函数中处理业务或者跳转等
                infoEle.on('click', (e) => {
                  router.push({name: 'proinfo', params: pro})
                })
              })
            })
          })

5、最后本人的效果图

这个title是准备做浮动布局,做返回按钮和标题栏的,还没写css,最后一张是我这块最后做完的效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动开发之家

从Android到React Native开发(一、入门)

 大家好┏ (^ω^)=,许久不见,一不小心断更就成为了一种习惯,因为最近掉React Native的坑里,无法自拔啊~(╯‵□′)╯︵┻━┻。

10620
来自专栏python小白到大牛

动漫迷的福利!Python小白也可以学会的爬虫教程

有一段没用 python 了,我也不知道自己为什么对 python 越来越淡,可能自己还是比较喜欢 android ,毕竟自己第一次接触编程就是 android...

14920
来自专栏ThoughtWorks

CSS-in-JS,向Web组件化再迈一大步 | 洞见

简介 CSS-in-JS是什么,看到这个词就能大概猜到是在JavaScript里写CSS,那为什么要在JavaScript里写CSS呢,像之前一样写在css文件...

32180
来自专栏大数据钻研

前端面试那些坑之HTML篇

HTML 1、Doctype作用?标准模式与兼容模式各有什么区别? (1)、<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<html> 标签之前...

40890
来自专栏Debian社区

Debian下安装搜狗拼音输入法

2013年12月,搜狗与Ubuntu Kylin团队开始合作开发“搜狗输入法Linux版”。经过五个月的合作,于2014年4月17日,正式发布了1.0版本。20...

36230
来自专栏進无尽的文章

基础篇-app上传小准备及上架后搜索不显示

        app上传中会需要准备一些文件,如 icon图标,launch Image ,itunes Contect 中还需要上传不同尺寸的屏幕截图等,下...

25420
来自专栏Android机动车

大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

Airbnb出了移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/i...

39510
来自专栏星流全栈

二〇一六年的前端入门指南

14280
来自专栏拂晓风起

createjs入门

20030
来自专栏程序员的诗和远方

React Native 实现二维码扫描

最近刚好在学习 React Native 想搞个扫描条形码,二维码的小应用,因为涉及硬件接口,而且自己本身并没有原生开发背景,踩了几个坑,记录一下。 扫描...

71280

扫码关注云+社区

领取腾讯云代金券