标签：定位 elementui 标签 self pois 默认 result true 高德

<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>

标签：定位,elementui,标签,self,pois,默认,result,true,高德
来源： https://www.cnblogs.com/ckfuture/p/14957260.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。