Vue.js 中使用高德地图定位及渲染地图

Ku_Andrew 发布于2019-08-21 17:58 / 1082人阅读

摘要：看了上面有集成的高德地图组件，但由于项目所要用到的不多，所以决定跟着文档写一写运行环境是引入高德地图一般用使用最简单粗暴的引入地图的方法就是，在入口的头部直接引入，记得一定要带上如果没有的话去高德地图的官网申请一个。

看了github上面有集成的高德地图组件，但由于项目所要用到的不多，所以决定跟着文档写一写.运行环境是vue-cli webpack

引入高德地图

一般用使用vue-cli webpack最简单粗暴的引入地图api的方法就是，在入口index.html的头部直接引入，记得一定要带上key,如果没有的话去高德地图api的官网申请一个。传送门如下：

申请key传送门

这样你将所有的高德地图api引入你的项目，到这里你肯定会问，vue每个组件该怎么直接调用呢？
往下~

创建一个地图组件

vue创建组件不赘述

首先你得有一个高德地图实例。所以，new一个嘛。建议将地图的实例化写在methods中，然后在mounted中调用方法。

    let mapObj = new AMap.Map("map-location", {//"map-location"是对应页面盒子的id
        resizeEnable: true, //自适应大小
        zoom: 13//初始视窗
    });
    // AMap是高德地图的构造函数，这里.Map是创建地图，.Marker是创建坐标点

这样你就创建一张地图，一个只有地图的地图：}，这样当然不行，下面就介绍使用地图的三种API

地图描点

在使用上述方法创建地图实例后，直接调用AMap的Marker方法

    marker = new AMap.Marker({
         map: _this.mapObj,
         position: new AMap.LngLat("经度", "纬度") //此处根据页面数据可以直接传入经纬度进行描点
    })

传入两个点的经纬度坐标绘制路线

调用AMap的server方法，第一个参数可以有三种选择：

步行

打车

公交

第二个参数是一个回调函数，在里面实例化步行路线，代码如下

    AMap.service("AMap.Walking", function() { //回调函数
        var MWalk = new AMap.Walking({
            map: _this.mapObj
        }); //构造路线导航类

        MWalk.search(["当前经度", "当前纬度"], ["目标经度", "目标纬度"], function(status, result) {})
    })

用户定位

第一步当然是创建地图实例，由于定位不需要展示地图，所以可以将地图挂载的盒子css样式设置为宽高都设置为0，这样就不影响页面的布局

    let mapObj = new AMap.Map("iCenter") //iCenter是id容器名称

创建实例之后需要使用高德地图的一个定位插件，AMap.Geolocation,用plugin方法调用

    mapObj.plugin("AMap.Geolocation", function() {})

在回调函数中，实例化一个定位的实例geolocation,可以配置相关参数

    geolocation = new AMap.Geolocation({
        timeout: 10000,
        GeoLocationFirst: false,
        maximumAge: 0 //定位结果缓存0毫秒，默认：0
    });
    mapObj.addControl(geolocation)
    geolocation.getCurrentPosition()

定位配置参数传送门

监听定位是否成功还是失败，成功则可以得到当前位置的经度和纬度

    AMap.event.addListener(geolocation, "complete", function(data) {
        data.position.getLng() //定位成功返回的经度
        data.position.getLat() //定位成功返回的纬度
    }); //返回定位信息
    AMap.event.addListener(geolocation, "error", function(data) {
        if (data.info == "FAILED") {
            alert("获取您当前位置失败！")
        }
    });

有啥问题欢迎咨询，有错误也欢迎指出，谢谢~

----------分割线-----------

这篇文章写于两年前了，期间各项技术都有了重大更新，因近期阅读人数较多，如果各位发现了什么更新的api请指出，我将对文章进行修改~

服务器托管 idc机房托管高德地图高德地图大数据高德地图android 高德地图 php

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90287.html

vue项目中使用百度地图(vue-baidu-map)

摘要：当属性为合法地名字符串时例外，因为百度地图会根据地名自动调整的值由于百度地图只有一种加载方式，因此组件及其所有子组件的渲染只能是异步的。在使用vue做项目的时候，有用到百度地图，使用了vue-baidu-map插件，包括拾取位置坐标，搜索位置等 1.引入方式 showImg(https://segmentfault.com/img/bVbv0hs?w=835&h=531); 可在ap...

番茄西红柿 2019-08-26 10:35 评论0 收藏0
慕课网_《如何使用高德云图在线制作属于你的地图》学习总结

摘要：时间年月日星期日说明本文部分内容均来自慕课网。用户可以在服务器端调用云存储云检索从而构建自己的存储和检索服务，甚至可以制作自己的数据管理台。时间：2017年08月13日星期日说明：本文部分内容均来自慕课网。@慕课网：http://www.imooc.com教学源码：无学习源码：https://github.com/zccodere/s... 第一章：云图产品介绍 1-1 云图产品介绍...

k00baa 2019-08-16 10:39 评论0 收藏0
慕课网_《如何使用高德云图在线制作属于你的地图》学习总结

摘要：时间年月日星期日说明本文部分内容均来自慕课网。用户可以在服务器端调用云存储云检索从而构建自己的存储和检索服务，甚至可以制作自己的数据管理台。时间：2017年08月13日星期日说明：本文部分内容均来自慕课网。@慕课网：http://www.imooc.com教学源码：无学习源码：https://github.com/zccodere/s... 第一章：云图产品介绍 1-1 云图产品介绍...

afishhhhh 2019-08-22 10:53 评论0 收藏0
前端小知识--地图坐标转换

摘要：实际中我们可能会用到不同的地图，那么就对应到不同坐标系的转换，比如说，你有一份的数据服务，你要展现在百度或者高德地图上，这时候你就需要转换了。地图坐标转换 LBS，基于位置的服务（Location Based Service)，近年来已经无处不在，尤其是我们前端，相信或多或少都有接触一些地图API服务，比如高德、百度啊、谷歌啊~但是用的时候可能看到下面这些字眼：比如BD09、火星坐标...

liangdas 2019-08-22 15:08 评论0 收藏0