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

Ku_Andrew 發布于2019-08-21 17:58 / 1230人閱讀

摘要：看了上面有集成的高德地圖組件，但由于項目所要用到的不多，所以決定跟著文檔寫一寫運行環境是引入高德地圖一般用使用最簡單粗暴的引入地圖的方法就是，在入口的頭部直接引入，記得一定要帶上如果沒有的話去高德地圖的官網申請一個。

看了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請指出，我將對文章進行修改~

云服務器 GPU云服務器高德地圖高德地圖大數據高德地圖android 高德地圖 php

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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