elementui 引入高德地圖標記點和標簽

 

<el-amap
                ref="map"
                class="amap-box"
                :vid="'amap-vue'"
                :amap-manager="amapManager"
                :center="center"
                expandZoomRange="true"
                :zoom="zoom"
                :plugin="plugins"
                :pitch="66"
            >
                <!--marker-->
                <el-amap-marker
                    v-for="(marker,index) in markers"
                    :key ="'marker'+index"
                    :position ="marker"
                    :label="label"
                > </el-amap-marker>

                <!--圓-->
                <el-amap-circle
                vid= "circle"
                :center="center"
                :radius="radius"
                fill-opacity= "0.2"
                strokeColor= "#38f"
                strokeOpacity= "0.8"
                strokeWeight= "1"
                fillColor= "#38f"
                >
            </el-amap-circle>

            </el-amap>

<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
    data () {
        return {
            //marker點集合
            markers: [],

            //mark點的label名稱
            label:{
                content:
                    '欽匯園',
                offset:[10,12]
            },
            //圓的半徑
            radius: 100,

            searchOption: {
                city: "全國",
                citylimit: false,
            },

            msg: 'vue-amap向你問好！',
            center: [119.72899, 30.254775],
            plugins: [
                {
                    enableHighAccuracy: true, //是否使用高精度定位，默認:true
                    timeout: 100, //超過10秒后停止定位，默認：無窮大
                    maximumAge: 0, //定位結果緩存0毫秒，默認：0
                    convert: true, //自動偏移坐標，偏移后的坐標為高德坐標，默認：true
                    showButton: true, //顯示定位按鈕，默認：true
                    buttonPosition: "LB", //定位按鈕停靠位置，默認：'LB'，左下角
                    showMarker: true, //定位成功后在定位到的位置顯示點標記，默認：true
                    showCircle: true, //定位成功后用圓圈表示定位精度范圍，默認：true
                    panToLocation: false, //定位成功后將定位到的位置作為地圖中心點，默認：true
                    zoomToAccuracy: true, //定位成功后調整地圖視野范圍使定位位置及精度范圍視野內可見，默認：f
                    extensions: "all",
                    //地圖定位按鈕
                    pName: "Geolocation",
                    init(o) {
                        // o 是高德地圖定位插件實例
                        o.getCurrentPosition((status, result) => {
                            console.log(result);
                            if (result && result.position) {
                                self.lng = result.position.lng;
                                self.lat = result.position.lat;
                                self.center = [self.lng, self.lat];
                                self.loaded = true;
                                self.$nextTick();
                            }
                        });
                    },
                },
                {
                    //地圖工具條
                    pName: "ToolBar",
                    init(o) {},
                },
                {
                    //左下角縮略圖插件 比例尺
                    pName: "Scale",
                    init(o) {},
                },
            ]
        }
    },
    created() {
        //114.397169, 30.50576
        //this.markers.push([pois[0].lng,pois[0].lat])
        this.markers.push([114.397169,30.50576]);
    },
    methods:{
        //點擊搜索后觸發的事件
        onSearchResult(pois){
            console.log(pois)
            this.input = document.querySelector('.search-box-wrapper input').value
            this.center = [pois[0].lng,pois[0].lat]        //選擇了第一個值
            this.markers = [];    //標記點先清空
            this.markers.push([pois[0].lng,pois[0].lat])   //把搜索的位置的第一個值存入標記中並顯示標記點
            console.log(this.markers);
        }
    }

}
</script>