成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Ku_Andrew / 1244人閱讀

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

看了github上面有集成的高德地圖組件，但由于項目所要用到的不多，所以決定跟著文檔寫一寫.運行環(huán)境是vue-cli webpack

引入高德地圖

一般用使用vue-cli webpack最簡單粗暴的引入地圖api的方法就是，在入口index.html的頭部直接引入，記得一定要帶上key,如果沒有的話去高德地圖api的官網(wǎng)申請一個。傳送門如下：

申請key傳送門

這樣你將所有的高德地圖api引入你的項目，到這里你肯定會問，vue每個組件該怎么直接調(diào)用呢？
往下~

創(chuàng)建一個地圖組件

vue創(chuàng)建組件不贅述

首先你得有一個高德地圖實例。所以，new一個嘛。建議將地圖的實例化寫在methods中，然后在mounted中調(diào)用方法。

    let mapObj = new AMap.Map("map-location", {//"map-location"是對應(yīng)頁面盒子的id
        resizeEnable: true, //自適應(yīng)大小
        zoom: 13//初始視窗
    });
    // AMap是高德地圖的構(gòu)造函數(shù)，這里.Map是創(chuàng)建地圖，.Marker是創(chuàng)建坐標(biāo)點

這樣你就創(chuàng)建一張地圖，一個只有地圖的地圖：}，這樣當(dāng)然不行，下面就介紹使用地圖的三種API

地圖描點

在使用上述方法創(chuàng)建地圖實例后，直接調(diào)用AMap的Marker方法

    marker = new AMap.Marker({
         map: _this.mapObj,
         position: new AMap.LngLat("經(jīng)度", "緯度") //此處根據(jù)頁面數(shù)據(jù)可以直接傳入經(jīng)緯度進(jìn)行描點
    })

傳入兩個點的經(jīng)緯度坐標(biāo)繪制路線

調(diào)用AMap的server方法，第一個參數(shù)可以有三種選擇：

步行

打車

公交

第二個參數(shù)是一個回調(diào)函數(shù)，在里面實例化步行路線，代碼如下

    AMap.service("AMap.Walking", function() { //回調(diào)函數(shù)
        var MWalk = new AMap.Walking({
            map: _this.mapObj
        }); //構(gòu)造路線導(dǎo)航類

        MWalk.search(["當(dāng)前經(jīng)度", "當(dāng)前緯度"], ["目標(biāo)經(jīng)度", "目標(biāo)緯度"], function(status, result) {})
    })

用戶定位

第一步當(dāng)然是創(chuàng)建地圖實例，由于定位不需要展示地圖，所以可以將地圖掛載的盒子css樣式設(shè)置為寬高都設(shè)置為0，這樣就不影響頁面的布局

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

創(chuàng)建實例之后需要使用高德地圖的一個定位插件，AMap.Geolocation,用plugin方法調(diào)用

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

在回調(diào)函數(shù)中，實例化一個定位的實例geolocation,可以配置相關(guān)參數(shù)

    geolocation = new AMap.Geolocation({
        timeout: 10000,
        GeoLocationFirst: false,
        maximumAge: 0 //定位結(jié)果緩存0毫秒，默認(rèn)：0
    });
    mapObj.addControl(geolocation)
    geolocation.getCurrentPosition()

定位配置參數(shù)傳送門

監(jiān)聽定位是否成功還是失敗，成功則可以得到當(dāng)前位置的經(jīng)度和緯度

    AMap.event.addListener(geolocation, "complete", function(data) {
        data.position.getLng() //定位成功返回的經(jīng)度
        data.position.getLat() //定位成功返回的緯度
    }); //返回定位信息
    AMap.event.addListener(geolocation, "error", function(data) {
        if (data.info == "FAILED") {
            alert("獲取您當(dāng)前位置失?。?)
        }
    });

有啥問題歡迎咨詢，有錯誤也歡迎指出，謝謝~

----------分割線-----------

這篇文章寫于兩年前了，期間各項技術(shù)都有了重大更新，因近期閱讀人數(shù)較多，如果各位發(fā)現(xiàn)了什么更新的api請指出，我將對文章進(jìn)行修改~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90287.html

相關(guān)文章

  • vue項目中使用百度地圖(vue-baidu-map)

    摘要：當(dāng)屬性為合法地名字符串時例外，因為百度地圖會根據(jù)地名自動調(diào)整的值由于百度地圖只有一種加載方式，因此組件及其所有子組件的渲染只能是異步的。 在使用vue做項目的時候，有用到百度地圖，使用了vue-baidu-map插件，包括拾取位置坐標(biāo)，搜索位置等 1.引入方式 showImg(https://segmentfault.com/img/bVbv0hs?w=835&h=531); 可在ap...

    番茄西紅柿 評論0 收藏0

  • 慕課網(wǎng)_《如何使用高德云圖在線制作屬于你的地圖》學(xué)習(xí)總結(jié)

    摘要：時間年月日星期日說明本文部分內(nèi)容均來自慕課網(wǎng)。用戶可以在服務(wù)器端調(diào)用云存儲云檢索從而構(gòu)建自己的存儲和檢索服務(wù)，甚至可以制作自己的數(shù)據(jù)管理臺。 時間：2017年08月13日星期日說明：本文部分內(nèi)容均來自慕課網(wǎng)。@慕課網(wǎng)：http://www.imooc.com教學(xué)源碼：無學(xué)習(xí)源碼：https://github.com/zccodere/s... 第一章：云圖產(chǎn)品介紹 1-1 云圖產(chǎn)品介紹...

    k00baa 評論0 收藏0

  • 慕課網(wǎng)_《如何使用高德云圖在線制作屬于你的地圖》學(xué)習(xí)總結(jié)

    摘要：時間年月日星期日說明本文部分內(nèi)容均來自慕課網(wǎng)。用戶可以在服務(wù)器端調(diào)用云存儲云檢索從而構(gòu)建自己的存儲和檢索服務(wù)，甚至可以制作自己的數(shù)據(jù)管理臺。 時間：2017年08月13日星期日說明：本文部分內(nèi)容均來自慕課網(wǎng)。@慕課網(wǎng)：http://www.imooc.com教學(xué)源碼：無學(xué)習(xí)源碼：https://github.com/zccodere/s... 第一章：云圖產(chǎn)品介紹 1-1 云圖產(chǎn)品介紹...

    afishhhhh 評論0 收藏0

  • 前端小知識--地圖坐標(biāo)轉(zhuǎn)換

    摘要：實際中我們可能會用到不同的地圖，那么就對應(yīng)到不同坐標(biāo)系的轉(zhuǎn)換，比如說，你有一份的數(shù)據(jù)服務(wù)，你要展現(xiàn)在百度或者高德地圖上，這時候你就需要轉(zhuǎn)換了。 地圖坐標(biāo)轉(zhuǎn)換 LBS，基于位置的服務(wù)（Location Based Service)，近年來已經(jīng)無處不在，尤其是我們前端，相信或多或少都有接觸一些地圖API服務(wù)，比如高德、百度啊、谷歌啊~但是用的時候可能看到下面這些字眼：比如BD09、火星坐標(biāo)...

    liangdas 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<