vue项目中引入百度地图api,并根据经纬度坐标添加覆盖物

先上效果图:

第一步:在 public的index.html中引入百度地图api,ak需要在百度开放平台申请

第二步:定义一个构造函数用于批量创建地图遮盖物 

// ----------------------------  1.定义自定义覆盖物的构造函数
function SquareOverlay(this: any, center: any, data: any) {
  this._center = center;
  this._data = data;
}
SquareOverlay.prototype = new window.BMapGL.Overlay();

SquareOverlay.prototype.initialize = function (map: Window["BMapGL"]): HTMLElement {
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目调用百度地图API实现根据经纬度判断某个点是否在淮安地区范围内,可以按照以下步骤: 1. 在Vue项目安装百度地图JavaScript API的SDK,可以通过以下命令进行安装: ``` npm install bmap-js-sdk --save ``` 2. 在Vue组件引入百度地图的JavaScript API,可以在`mounted`钩子函数进行初始化: ``` mounted() { this.initMap(); }, methods: { initMap() { const AK = '申请的百度地图API Key'; const BMap = window.BMap; this.map = new BMap.Map('map-container'); this.map.centerAndZoom(new BMap.Point(119.015, 33.61), 12); // 设置心点和缩放级别 this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 this.map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 this.map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 this.map.addControl(new BMap.OverviewMapControl()); // 添加缩略地图控件 this.geo = new BMap.Geocoder(); // 初始化地理编码器 } } ``` 3. 根据淮安地区的经纬度信息,使用百度地图的多边形覆盖物来绘制淮安地区的范围,代码如下: ``` const points = [ new BMap.Point(119.004, 33.559), new BMap.Point(119.004, 33.678), new BMap.Point(119.16, 33.678), new BMap.Point(119.16, 33.559) ]; const polygon = new BMap.Polygon(points, {strokeColor: '#f00', strokeWeight: 2, strokeOpacity: 0.8, fillColor: '#f00', fillOpacity: 0.2}); this.map.addOverlay(polygon); ``` 4. 在Vue组件定义一个方法,该方法接收一个经纬度对象作为参数,判断该经纬度是否在淮安地区的范围内,代码如下: ``` checkLocation(point) { const polygon = this.map.getOverlays()[0]; // 获取多边形覆盖物 if (polygon.containsPoint(point)) { console.log('该点在淮安地区范围内'); } else { console.log('该点不在淮安地区范围内'); } } ``` 5. 在Vue组件调用`checkLocation`方法,传入经纬度参数,判断该点是否在淮安地区范围内,代码如下: ``` // 获取经纬度信息 const point = new BMap.Point(119.015, 33.61); // 调用checkLocation方法判断该点是否在淮安地区范围内 this.checkLocation(point); ``` 以上就是在Vue项目调用百度地图API实现根据经纬度判断某个点是否在淮安地区范围内的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值