讓高德地圖上點標記顯示發光效果

　　第一次寫東西，技術水平不是很高，只是為了方便記憶。

　　最近項目中有一個在地圖上顯示定位的需求，這本來沒什么，只要初始化一個地圖，將后台傳過來的定位信息通過高德API在地圖上顯示就行了，最主要的是需要讓點像光源一樣有閃爍的效果，本來是想在網上找一下copy的，結果沒找到。所以自己研究了一下。

　　為了方便記憶，所以會將從怎么創建地圖，到顯示定位點的整個過程紀錄下來。

　　首先聲明這里用的是vue加高德API，第一步，將高德API引入vue，在這里先將下面這句代碼放到index.html的頭部。

<script src="https://webapi.amap.com/maps?v=1.4.10&key=你的key值"></script>

　　然后在webpack.base.conf.js中加入，這里window.AMap好像可以直接寫AMap

externals: {
    'AMap': 'window.AMap'
  }

　　然后在你需要的界面引用就行了

import AMap from 'AMap'

　　到此為止，是前期的准備工作。

　　接下來開始創建地圖了，因為有時需要在地圖上做數據更新，所以需要把地圖的創建用一個方法提取出來，只在mounted里調用一次就行，避免數據更新是重復創建。

initmap() {
            //創建地圖
            this.map = new AMap.Map("container", {
                center: [120.061897, 30.356648], //設置中心點
                // pitch: 60,
                // rotation: -35,
                resizeEnable: true, //是否監控地圖容器尺寸變化
                features: ["bg", "road", "point"], //隱藏默認樓塊
                mapStyle: "amap://styles/bf8a443a1cae459d53212187f63b444c", //設置地圖的顯示樣式
                // layers: [new AMap.TileLayer.Satellite()], //地圖圖層（衛星圖層）    new AMap.TileLayer()
                zoom: 16 //地圖顯示的縮放級別
            });
}

　　這里值得注意的是mapStyle這個參數的值里bf8a443a1cae459d53212187f63b444c這個值，是我登錄高德開發者平台，在自定義地圖里自己創建發布的一個地圖樣式，個人認為根據圖片創建地圖更舒服一些。

　　接下來，因為我們的后台數據還沒有對接好，所以自己定義了一條假數據。

var capitals = [
                {
                    center:[120.060824,30.357574],
                    color:'#00e921',
                    animations:'myfirst01'
                },
                {
                    center:[120.061824,30.358574],
                    color:'#fffa02',
                    animations:'myfirst02'
                },
                {
                    center:[120.062824,30.354574],
                    color:'#00e921',
                    animations:'myfirst01'
                },
                {
                    center:[120.063824,30.35974],
                    color:'#fffa02',
                    animations:'myfirst02'
                },
                {
                    center:[120.057824,30.352574],
                    color:'#00e921',
                    animations:'myfirst01'
                },
                {
                    center:[120.056824,30.354574],
                    color:'#fffa02',
                    animations:'myfirst02'
                },
                {
                    center:[120.055824,30.360574],
                    color:'#98014e',
                    animations:'myfirst03'
                },
                {
                    center:[120.071824,30.358574],
                    color:'#98014e',
                    animations:'myfirst03'
                },
                {
                    center:[120.061824,30.358574],
                    color:'#ff7d00',
                    animations:'myfirst04'
                },
                {
                    center:[120.061824,30.358574],
                    color:'#ff7d00',
                    animations:'myfirst04'
                },
            ]

　　在這里解釋一下為什么會有animations這個屬性，這是因為我在這里做了兩種效果，等一下會一一解釋。在這之前我在高德地圖上加定位標記都是點標記，通過new AMap.Marker()。但是這個方法只支持對直徑，顏色，透明度，邊框直徑，邊框顏色，邊框透明度的修改，並沒有對點標記樣式的修改，當然，你也可以讓ui給你設計一款圖片，但是圖片加載總會耗資源的，最后找了一會發現其實文本標記是可以隨意修改樣式的，所以最后第一種方法是這樣的：

js

for(var i=0;i<capitals.length;i+=1){
                var text = new AMap.Text({
                    text:' ',
                    textAlign:'center',
                    verticalAlign:'middle', //middle 、bottom
                    draggable:true,
                    cursor:'pointer',
                    angle:10,
                    style:{
                        'width': '10px',
                        'height': '10px',
                        'border-radius': '50%',
                        'border-width': 0,
                        'text-align': 'center',
                        'font-size': '12px',
                        'color': 'blue',
                        'background-color':capitals[i].color,
                        // '-moz-box-shadow': '0px 0px 20px 2px '+capitals[i].color,
                        // 'box-shadow': '0px 0px 20px 2px '+capitals[i].color,
                        'animation': capitals[i].animations+' 1s infinite',
                        // 'animation': 'myfirst 1s infinite'
                    },
                    position: capitals[i].center
                })
                text.setMap(this.map);
            }

css

@keyframes myfirst01{
        0% {
            -moz-box-shadow: 0px 0px 10px 2px #00e921;
            box-shadow: 0px 0px 10px 2px #00e921;
        }
        50% {
            -moz-box-shadow: 0px 0px 20px 2px #00e921;
            box-shadow: 0px 0px 20px 2px #00e921;
        }
        100% {
            -moz-box-shadow: 0px 0px 10px 2px #00e921;
            box-shadow: 0px 0px 10px 2px #00e921;
        }
        
}
@keyframes myfirst02{
        0% {
            -moz-box-shadow: 0px 0px 10px 2px #fffa02;
            box-shadow: 0px 0px 10px 2px #fffa02;
        }
        50% {
            -moz-box-shadow: 0px 0px 20px 2px #fffa02;
            box-shadow: 0px 0px 20px 2px #fffa02;
        }
        100% {
            -moz-box-shadow: 0px 0px 10px 2px #fffa02;
            box-shadow: 0px 0px 10px 2px #fffa02;
        }
        
}
@keyframes myfirst03{
        0% {
            -moz-box-shadow: 0px 0px 10px 2px #98014e;
            box-shadow: 0px 0px 10px 2px #98014e;
        }
        50% {
            -moz-box-shadow: 0px 0px 20px 2px #98014e;
            box-shadow: 0px 0px 20px 2px #98014e;
        }
        100% {
            -moz-box-shadow: 0px 0px 10px 2px #98014e;
            box-shadow: 0px 0px 10px 2px #98014e;
        }
        
}
@keyframes myfirst04{
        0% {
            -moz-box-shadow: 0px 0px 10px 2px #ff7d00;
            box-shadow: 0px 0px 10px 2px #ff7d00;
        }
        50% {
            -moz-box-shadow: 0px 0px 20px 2px #ff7d00;
            box-shadow: 0px 0px 20px 2px #ff7d00;
        }
        100% {
            -moz-box-shadow: 0px 0px 10px 2px #ff7d00;
            box-shadow: 0px 0px 10px 2px #ff7d00;
        }
        
}

　　這種方法就需要用到animations這個屬性，至於為啥會有這么多的動畫，是因為我創建的點的顏色不止一種，如果對樣式不滿意的話可以自己修改，並沒有什么很偏僻的樣式。

　　尷尬！！！不知道怎么錄屏，反正這種方法的效果就是本體大小不變，外部光圈大小改變。

　　第二種方法就是：

js

for(var i=0;i<capitals.length;i+=1){
                var text = new AMap.Text({
                    text:' ',
                    textAlign:'center',
                    verticalAlign:'middle', //middle 、bottom
                    draggable:true,
                    cursor:'pointer',
                    angle:10,
                    style:{
                        'width': '10px',
                        'height': '10px',
                        'border-radius': '50%',
                        'border-width': 0,
                        'text-align': 'center',
                        'font-size': '12px',
                        'color': 'blue',
                        'background-color':capitals[i].color,
                        '-moz-box-shadow': '0px 0px 20px 2px '+capitals[i].color,
                        'box-shadow': '0px 0px 20px 2px '+capitals[i].color,
                        // 'animation': capitals[i].animations+' 1s infinite',
                        'animation': 'myfirst 1s infinite'
                    },
                    position: capitals[i].center
                })
                text.setMap(this.map);
            }

css

@keyframes myfirst{
    0% {transform: scale(1);}
    50% {transform: scale(1.5);}
    100% {transform: scale(1);}
}

　　這種就是本身大小和光圈大小同時改變。同樣，沒有例子上傳。

　　ok，打完收工，第一次寫這個，感覺還行。就是寫的東西沒什么技術含量，汗。。。。。。