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>