云筑文档（桌面端）

本文档使用 MrDoc 发布

baidu地图

<div class="textDiv">

![](/media/202404/2024-04-30_102507_222788.png)

------------
经纬度

------------
代码示例如下
```html
<template>
    <div>
        <el-button @click="clickFn">添加</el-button>
        <el-button @click="delclickFn">删除</el-button>
        <hi-baidu-map ref="map" v-bind="option" @ready="readyFn" @mapdblclick="mapdblclick"></hi-baidu-map>
    </div>
</template>

<script>
    export default {
    data() {
        return {
            value:"",
            map:{},
            curPolygon:null,
            option:{   
                label:"地图选择", 
                height:"700px",
                hasSearch:true,
                zoom:13,
                // centerAndZoomFn:function(){
               
                //     return {
                //         lng:119.320259,
                //         lat:26.060512,
                //         zoom:16 
                //     }
                // }
                // animateFn(resolve,map){
                //     var option ={
                //         "center": [119.320259,26.060512],
                //     }
                //     resolve(option);
                // }
            }
        }
    },
    methods: {
        clickFn(){
            this.$refs.map.enableDraw=!this.$refs.map.enableDraw;
            
        },
        readyFn(_this){
            let points1=[[116.389, 39.910], [116.425, 39.920], [116.521, 39.900]]
            let points=[[116.399, 39.910], [116.405, 39.920], [116.425, 39.900]]
            let p = new _this.BMap.Point(116.389, 39.910);
            let p2 = new _this.BMap.Point(116.425, 39.920);
            _this.addOverlay("Polyline",points1,{strokeColor: "red"})
            let Polygon = _this.addOverlay("Polygon",points,{strokeColor: "orange"});
            // Polygon.enableEditing();
            let centerPoint = Polygon.getBounds().getCenter();
            _this.addMarker(centerPoint)
            let a = _this.map.getDistance(p,centerPoint);
            let b = _this.map.getDistance(p2,centerPoint);
            console.log(`a:${a},b:${b},a>b:${a>b}`);
            console.log(_this.containsPoint(Polygon,[116.399, 39.910]));
        },
        mapdblclick(_this,obj){
            if(obj){
                this.map[obj.ba] = obj;
                this.map[obj.ba].addEventListener("click", this.overlayClick);
                this.map[obj.ba].addEventListener("rightclick", ()=>{debugger;});
            }
        },
        overlayClick(Polygon){
            this.curPolygon = Polygon;
            Polygon.target.enableEditing();
        },
        delclickFn(){
            this.$refs.map.map.removeOverlay(this.curPolygon.target);
        }
    },
    computed: {
       
    },
    created() {

}
};
</script>
```

</div>
### Attributes

| 参数              | 说明     | 类型       | 可选值 | 默认值                           |
|-----------------|--------|----------|-----|-------------------------------|
| height          | 高度     | String   |     | 600px                         |
| center          | 默认中心点  | Object   |     | { lng: 116.404, lat: 39.915 } |
| zoom            | 默认缩放级别 | Number   |     | 5                             |
| hasSearch       | 是否搜索   | Boolean  |     | false                         |
| centerAndZoomFn | 自定义中心点 | function |     |                               |

<style>
.textDiv{
border:1px solid #F5F5F5;
padding: 20px 35px;
border-radius: 4px;
}
.textDiv:hover{
border-color:#1890ff;
}

</style>

admin 2024年4月30日 10:25 收藏文档

上一篇

下一篇