vue項(xiàng)目中使用高德地圖api（自定義標(biāo)記點(diǎn)為例）

現(xiàn)在實(shí)現(xiàn)的業(yè)務(wù)是在地圖上用經(jīng)緯度顯示相應(yīng)的標(biāo)記點(diǎn)及數(shù)據(jù)（自定義標(biāo)記點(diǎn)），之前使用過高德地圖行政區(qū)域放大的api，由于代碼量有點(diǎn)多就用了這個最近使用的自定義標(biāo)記點(diǎn)的示例來做展示，實(shí)現(xiàn)的方式都是一樣的。
高德地圖JS API：https://lbs.amap.com/api/javascript-api/guide/overlays/marker

這是示例中源代碼的效果圖，紅框標(biāo)記就是自定義標(biāo)記點(diǎn)

而現(xiàn)在我想實(shí)現(xiàn)下圖的效果：

下面看一下他的源代碼，源代碼中province明顯是一個數(shù)組，標(biāo)記點(diǎn)是通過遍歷這個數(shù)組的數(shù)據(jù)插入的，provinces[i].type === 2里面（"<div class = 'taiwan'>寶島臺灣</div>"）的就是我要做的自定義標(biāo)記點(diǎn)，其實(shí)就是一個div，標(biāo)記點(diǎn)的自定義就是通過修改這個div實(shí)現(xiàn)的。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        height: 100%;
        margin: 0px;
        font:12px Arial;
      }
      .taiwan{
        border: solid 1px red;
        color: red;
        float: left;
        width: 50px;
        background-color: rgba(255,0,0,0.1)
      }
    </style>
    <title>Marker example</title>
  </head>
  <body>
   <div id="container" tabindex="0"></div>
   <script src="https://webapi.amap.com/js/marker.js"></script>
   <script src="https://webapi.amap.com/maps?v=1.4.2&key="></script>
   <script type="text/javascript">

        var map = new AMap.Map('container',{resizeEnable: true,zoom:4});
        var markers = []; //province見Demo引用的JS文件
        for (var i = 0; i < provinces.length; i += 1) {
                var marker;
                if (provinces[i].type === 0) {
                    var icon = new AMap.Icon({
                        image: 'https://vdata.amap.com/icons/b18/1/2.png',
                        size: new AMap.Size(24, 24)
                    });
                    marker = new AMap.Marker({
                        icon: icon,
                        position: provinces[i].center.split(','),
                        offset: new AMap.Pixel(-12,-12),
                        zIndex: 101,
                        title: provinces[i].name,
                        map: map
                    });
                } else {
                    marker = new AMap.Marker({
                        position: provinces[i].center.split(','),
                        title: provinces[i].name,
                        map: map
                    });
            if (provinces[i].type === 2) {
                    var content= "<div class = 'taiwan'>寶島臺灣</div>";
                    baodao = new AMap.Marker({
                        content: content,
                        position: provinces[i].center.split(','),
                        title: provinces[i].name,
                        offset: new AMap.Pixel(0,0),
                        map: map
                    });
            }
                }
                markers.push(marker);
            }
              map.setFitView();
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
  </body>
</html>

了解了源代碼實(shí)現(xiàn)過程，現(xiàn)在是如何引入api，很多一開始接觸相關(guān)業(yè)務(wù)時肯定會考慮vue的地圖插件vue-amap，我也試著去實(shí)現(xiàn)過，但是他的文檔實(shí)在是過于抽象也很難找到相應(yīng)示例（可能只有我找不到），對于很多初學(xué)者或者沒怎么接觸這方面業(yè)務(wù)的開發(fā)者來說這似乎有點(diǎn)不太好實(shí)現(xiàn)。了解了高德地圖的api后發(fā)現(xiàn)也不是不能實(shí)現(xiàn)，源代碼是原生的那就用原生的方式實(shí)現(xiàn)。

首先看看他引入的東西是啥：

//分別是：
<script src="https://webapi.amap.com/js/marker.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.2&key="></script>

//還有
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>

注冊賬號和申請key的過程如下：
1. 首先，注冊開發(fā)者賬號，成為高德開放平臺開發(fā)者
2. 登陸之后，在進(jìn)入「應(yīng)用管理」 頁面「創(chuàng)建新應(yīng)用」
3. 為應(yīng)用添加 Key，「服務(wù)平臺」一項(xiàng)請選擇「 Web 端 ( JSAPI )」

通過異步的的方式引入：引入的方法后面可以封裝一下；只需要將provinces[i].type === 2里的內(nèi)容放入遍歷里面修改一下。這樣基本的效果就是實(shí)現(xiàn)了，content的內(nèi)容可以根據(jù)業(yè)務(wù)自定義，后面可以根據(jù)業(yè)務(wù)需求進(jìn)行修改。最后記得在destroyed中把引入的內(nèi)容清除。

async mounted() {
        let that = this;
        try{
            await that.createMarker();
            await that.createCoreScript()
            await that.createDemo();

            console.log('所有資源成功獲取...')
            that.map = new AMap.Map('container', {
                resizeEnable: true,
                zoom:4
            });
            let markers = [];
            
            let dataList [{        //dataList數(shù)據(jù)根據(jù)具體業(yè)務(wù)修改
              lng: '',
              lat: '',
              name: '龍華'，
              count: '25'
            },{
              lng: '',
              lat: '',
              name: '龍華'，
              count: '25'
            }]

            for (var i = 0; i < that.dataList.length; i += 1) {
                let marker;
                let content= `<div id = 'taiwan' 
                    style='display:flex;flex-direction: column;justify-content:center;align-items:center;color: #333;width: 80px; height:80px;border-radius:50%;text-align:center;background-color: #e2991a;font-weight:bold'
                >
                    <div style='margin-bottom:6px'>${that.dataList[i].name}</div>
                    <div>${that.dataList[i].count}個樓盤</div>
                </div>`;
                marker = new AMap.Marker({
                    content: content,
                    position: [that.dataList[i].Lng,that.dataList[i].Lat],
                    title: that.dataList[i].name,
                    offset: new AMap.Pixel(0,0),
                    map: that.map
                });
                markers.push(marker);
            }
        } catch(e) {
            console.log('資源獲取失敗')
        }
    },
    destroyed() {
        let coreScript = document.getElementById('coreScript');
        let markerScript = document.getElementById('markerScript');
        let demoScript = document.getElementById('demoScript');

        coreScript.parentNode.removeChild(coreScript);
        markerScript.parentNode.removeChild(markerScript);
        demoScript.parentNode.removeChild(demoScript);
    },
 methods: {
        createCoreScript() {
            return new Promise((resolve, reject) => {
                console.log('進(jìn)入加載核心資源')
                let url = `http://webapi.amap.com/maps?v=1.4.2&key=${this.KEY}`;
                let $script =document.createElement('script');
                $script.id = 'coreScript';
                $script.src = url;
                $script.type = 'text/javascript';
                $script.addEventListener('load', (event) => {
                    console.log('核心script 獲取成功')
                    resolve()
                })
                $script.onerror = function (e) {
                    console.log('js資源加載失敗了')
                }
                document.body.appendChild($script)
            })
        },

        createMarker() {
            return new Promise((resolve, reject) => {
            let url = `http://webapi.amap.com/js/marker.js`;
            let $script = document.createElement('script');
            $script.id = 'markerScript';
            $script.src = url;
            $script.type = 'text/javascript';
            $script.addEventListener('load', (event) => {
                console.log('Marker script 獲取成功')
                resolve()
            })
            document.body.appendChild($script)
            })
        },

        createDemo() {
            return new Promise((resolve, reject) => {
            let url = `http://webapi.amap.com/demos/js/liteToolbar.js`;
            let $script = document.createElement('script');
            $script.id = 'demoScript';
            $script.src = url;
            $script.type = 'text/javascript';
            $script.addEventListener('load', (event) => {
                console.log('demo script 獲取成功')
                resolve()
            })
            document.body.appendChild($script)
            })
        },

    }

下面是完整基本實(shí)現(xiàn)的代碼：其他api的實(shí)現(xiàn)方法也一樣

<template>
        <div class="container">
            <div id="container"></div>
        </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            map: '',
            KEY: '',    //將開發(fā)者賬號申請的key放入
        }
    },
    async mounted() {
        let that = this;
        try{
            await that.createMarker();
            await that.createCoreScript()
            await that.createDemo();

            console.log('所有資源成功獲取...')
            that.map = new AMap.Map('container', {
                resizeEnable: true,
                zoom:4
            });
            let markers = [];
             let dataList [{        //dataList數(shù)據(jù)根據(jù)具體業(yè)務(wù)修改
              lng: '',
              lat: '',
              name: '龍華'，
              count: '25'
            },{
              lng: '',
              lat: '',
              name: '龍華'，
              count: '25'
            }]

            for (var i = 0; i < that.dataList.length; i += 1) {
                let marker;
                console.log(i)
                let content= `<div id = 'taiwan' 
                    style='display:flex;flex-direction: column;justify-content:center;align-items:center;color: #333;width: 80px; height:80px;border-radius:50%;text-align:center;background-color: #e2991a;font-weight:bold'
                >
                    <div style='margin-bottom:6px'>${that.dataList[i].name}</div>
                    <div>${that.dataList[i].count}個樓盤</div>
                </div>`;
                marker = new AMap.Marker({
                    content: content,
                    position: [that.dataList[i].Lng,that.dataList[i].Lat],
                    title: that.dataList[i].name,
                    offset: new AMap.Pixel(0,0),
                    map: that.map
                });
                markers.push(marker);
            }
        } catch(e) {
            console.log('資源獲取失敗')
        }
    },
    destroyed() {
        let coreScript = document.getElementById('coreScript');
        let markerScript = document.getElementById('markerScript');
        let demoScript = document.getElementById('demoScript');

        coreScript.parentNode.removeChild(coreScript);
        markerScript.parentNode.removeChild(markerScript);
        demoScript.parentNode.removeChild(demoScript);
    },
    methods: {
        async getData(){
            const res = await this.$axios.get('/index/v1.index/find');
            this.dataList = res.data;
        },
        createCoreScript() {
            return new Promise((resolve, reject) => {
                console.log('進(jìn)入加載核心資源')
                let url = `http://webapi.amap.com/maps?v=1.4.2&key=${this.KEY}`;
                let $script = document.createElement('script');
                $script.id = 'coreScript';
                $script.src = url;
                $script.type = 'text/javascript';
                
                $script.addEventListener('load', (event) => {
                    console.log('核心script 獲取成功')
                    resolve()
                })
                $script.onerror = function (e) {
                    console.log('js資源加載失敗了')
                }
                document.body.appendChild($script)
            })
        },

        createMarker() {
            return new Promise((resolve, reject) => {
            let url = `http://webapi.amap.com/js/marker.js`;
            let $script = document.createElement('script');
            $script.id = 'markerScript';
            $script.src = url;
            $script.type = 'text/javascript';
            $script.addEventListener('load', (event) => {
                console.log('Marker script 獲取成功')
                resolve()
            })
            document.body.appendChild($script)
            })
        },

        createDemo() {
            return new Promise((resolve, reject) => {
            let url = `http://webapi.amap.com/demos/js/liteToolbar.js`;
            let $script = document.createElement('script');
            $script.id = 'demoScript';
            $script.src = url;
            $script.type = 'text/javascript';
            $script.addEventListener('load', (event) => {
                console.log('demo script 獲取成功')
                resolve()
            })
            document.body.appendChild($script)
            })
        },

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container{
    width: 100%;
    height: 1000px;
    margin: 0 auto;
    #container{
        height: 100%;
        margin: 0px;
        font:12px Arial;
    }
    .taiwan{
        border: solid 1px rgb(223, 52, 52);
        color: red;
        float: left;
        width: 50px;
        background-color: rgba(228, 162, 40, 0.1);
        background-color: #fff;
    }
}


</style>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容