关于使用高德地图电子围栏的前端api

<template>
	<view class="content">
		<div id="container" @click="admin"></div>

	</view>
</template>

<script>
	import AMapLoader from '@amap/amap-jsapi-loader';
	export default {
		data() {
			return {
				map: '',
				polyEditor: '',
				polygon:''
			}
		},
		onLoad() {
			this.init();

		},
		methods: {
			admin() {
				console.log(this.map);
			},
	
			createPolygon() {
				
			},
			open(){

				
			},
			close(){
			
			},
			init() {
				let that = this;
				AMapLoader.load({
					key: "f02a5ba3169d0c5690beeae5a0bc9354", // 申请好的Web端开发者Key,首次调用 load 时必填
					version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
					plugins: [''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
				}).then((AMap) => {
					that.map = new AMap.Map("container", { //设置地图容器id
						viewMode: "3D", //是否为3D地图模式
						center: [116.471354, 39.994257],
						zoom: 16.8
					});
				
					var path2 = [
						[116.474595, 40.001321],
						[116.473526, 39.999865],
						[116.476284, 40.000917]
					]
	
					var polygon2 = new AMap.Polygon({
						path: path2
					})

					that.map.add([ polygon2]);
					that.map.setFitView();
	
				that.map.plugin(["AMap.PolygonEditor"],function(){
				  // 实例化多边形编辑器,传入地图实例和要进行编辑的多边形实例
				  var polygonEditor = new AMap.PolygonEditor(that.map,polygon2); 
				  // 开启编辑模式
				polygonEditor.open(); 
				 
				}); 
				setInterval(function(){
					console.log(polygon2._opts.path); // 在这里10秒获取一次你修改的围栏 你可以写到data里面去 我这个写法不规范
				},10000)
				
				}).catch(e => {
					console.log(e);
				})
			}
		}
	}
</script>

<style lang="scss">
	#container {
		padding: 0px;
		margin: 0px;
		width: 100%;
		height: 100vh;
	}
</style>
.
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue是一个流行的JavaScript框架,可以用于构建用户界面。高德地图是一种流行的地图服务,它提供了丰富的地图功能和API电子围栏是一种边界区域,当特定的设备或人员进入或离开该区域时会触发警报或其他特定操作。 在Vue中使用高德地图电子围栏,首先需要在Vue项目中引入高德地图JavaScript API,可以通过在index.html文件中引入相应的脚本来实现,然后在组件中使用Vue的生命周期钩子函数进行初始化和销毁。 在组件中,我们可以使用高德地图API创建一个地图实例,并设置地图的中心点和缩放级别。然后,我们可以使用地图的绘图工具来创建电子围栏的多边形或圆形,可以通过监听绘图结束事件来获取围栏的坐标信息。 接下来,我们可以使用高德地图的围栏服务API来创建电子围栏。可以通过调用相应的方法,传入围栏的名称、坐标信息和其他参数来创建电子围栏。可以根据需求设置围栏的类型,如圆形、多边形等,以及警报触发的条件和动作。 在Vue中,可以通过使用指令或绑定事件来实现与电子围栏的交互。可以使用v-on指令来监听电子围栏的进入或离开事件,并触发相应的方法或动作。可以在方法中实现警报、通知或其他功能,以响应电子围栏的状态变化。 总之,Vue高德地图电子围栏可以通过使用高德地图API和Vue的生命周期钩子函数,实现在Vue项目中创建和管理电子围栏及其交互的功能。通过结合Vue的灵活性和高德地图的丰富功能,可以实现各种场景下的电子围栏应用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值