在angualr利用HTML5实现拖放与定位

Drag&&Drop

一、概述

拖放的目的可以将某个对象放置到你想要放的位置
拖放是一种常见的特性，比如在微信聊天室可以直接将文件或图片拖入输入框来发送信息。

二、拖放实例

  export class DrogDragComponent implements OnInit {

  allowDrop(event:any){
    event.preventDefault();
  }
  
  drag(event:any){
    event.dataTransfer.setData("Text",event.target.id);
  }
  
  drop(event:any){
    event.preventDefault();
    var data=event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
  constructor() { }

  ngOnInit(): void {
  }

}  


    <div class="container">
    <p>拖动图片到矩形框中:</p >

    <div id="div1" on-drop="drop($event)" on-dragover="allowDrop($event)"></div>
    <br>
    <img id="drag1"  draggable="true" on-dragstart="drag($event)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588063396822&di=b99ef7a68db3bb6509536f0f198fa536&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-10-30%2F59f68513a33ca.jpg">
    </div>



解释：
1.首先得设置元素是可拖放的：draggable="true";
<img draggable="true">
2.你想拖动什么然后那个元素就得设置两个函数
		1.ondragstart()
		2.setData()
在拖动元素时触发ondragstart属性调用drag(event)函数，它规定了被拖动的数据。
dataTransfer.setData()方法设置了被拖放的数据类型与值，在上面这个例子，数据类型是“Text”，值是可拖动元素的id("drag1").
3.默认的，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们就必须使用event.preventDefault()来阻止对元素的默认处理方式。
4.当释放鼠标时调用ondrop事件。
		1.必须阻止使用默认处理方式，event.preventDefault();
		2.通过event.dataTransfer.getData("Text");获得被拖动的数据。该方法将返回在setData()方法中设置为相同类型的任何数据。
		3.在这个例子，被拖动数据是被拖动元素的id("drag1")
		4.把被拖动元素追加到目标元素中
		




*在拖动目标上触发事件
	1.ondragstart--用户开始拖动元素时触发
	2.ondrag--元素正在拖动时触发
	3.ondragend--用户完成拖动后触发
*释放目标时触发的事件
	1.ondragenter--当被鼠标拖动的对象进入其容器范围内时触发的事件
	2.ondragover--当某一个被拖动的对象在另一个对象容器范围内拖动时触发此事件
	3.ondragleave--当被鼠标拖动的对象离开其容器范围内时触发的事件
	4.在一个拖动过程中，释放鼠标时触发此事件

效果：

在这里插入图片描述

实例二：实现来回拖动p元素

export class TestComponent implements OnInit {

  dragStart(event:any){
    
    event.dataTransfer.setData("Text",event.target.id);
    document.getElementById("show").innerHTML="开始拖动元素";
  }

  drop(event:any){
    
    event.preventDefault();
    var data=event.dataTransfer.getData("Text");
    console.log(event.target);
    event.target.appendChild(document.getElementById(data));
  }

  dragEnd(event:any){
    
    document.getElementById("show").innerHTML="拖动完成";
  }

  allowDrop(event:any){
    event.preventDefault();
  }
  constructor() { }

  ngOnInit(): void {
  }

}

<div class="container">
<p>在两个矩形中来回拖动p元素</p>
<div class="dropTarget" on-drop="drop($event)" on-dragover="allowDrop($event)">
<p on-dragstart="dragStart($event)" on-dragend="dragEnd($event)" draggable="true" id="dragTarget">有本事把拖我过去啊</p>
</div>
<div class="dropTarget" on-drop="drop($event)" on-dragover="allowDrop($event)"></div>
<br>
<p id="show"></p>
</div>


.container{
    margin-top:150px;
    margin-left:700px;
}
.dropTarget{
    width:100px;
    height:65px;
    margin:15px;
    border: 1px solid #aaaaaa;
}

效果：

在这里插入图片描述

Geolocation(地理定位)

一、概述

Geolocation用于定位用户的位置。
Geolocation通过请求一个位置信息，用户同意后，浏览器会返回一个包含经度和维度的位置信息。
由于该特性时触碰到用户的隐私，因此需要得到用户的同意。
该定位是应用美国的GPS。
可以用于GPS,IP地址，WIFI和蓝牙的MAC地址等

二、

HTML5提供的方法

一、getCurrentPosition()获取用户的位置
函数原型：getCurrentPosition(successCallback: PositionCallback, errorCallback?: PositionErrorCallback, options?: PositionOptions): void

1.coords.latitude:十进制数的维度
2.coords.longitude:十进制数的经度
3.coords.accuracy:位置精度
4.coords.altitude:海拔，海平面以上以百米计
5.coords.altitudeAccuracy:位置海拔精度
6.coords.heading:方向，从正北开始以度计
7.coords.speed:速度，以米/每秒计
8.timestamp:响应的日期/时间

二、watchPosition()返回用户当前位置，并继续返回用户移动的更新位置，就像导航一样

三、clearWatch()停止watchPosition()方法

三、使用地理位置简单示例

<html5>
<div class="container">
    <p id="show">获取地理位置</p>
    <input class="button" type="button" (click)="getLocation()" value="位置">
</div>


export class GeolocationComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  getLocation(){
    var obj=document.getElementById("show");
    if(navigator.geolocation){//判断浏览器是否兼容定位
    obj.innerHTML="该浏览器支持地理定位，正在追踪位置";
      navigator.geolocation.getCurrentPosition(this.showPosition,this.showError)
    }else{
      obj.innerHTML="该浏览器不支持HTML5的地理位置!";
    }
  }

  showPosition(position){//getCurrentPosition()成功的回调，则返回一个coordinates对象，即position
    var obj=document.getElementById("show");
    obj.innerHTML="纬度："+position.coords.latitude+"<br> 经度："+position.coords.longitude;
  }

  showError(error){//getCurrentionPosition()错误的回调，
    var obj=document.getElementById("show");
    switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      {
        obj.innerHTML="用户拒绝对获取地理位置的请求。"
        break;}
    case error.POSITION_UNAVAILABLE:
      {
        obj.innerHTML="位置信息是不可用的。"
        break;}
    case error.TIMEOUT:
      {
        obj.innerHTML="请求用户地理位置超时。"
        break;}
    case error.UNKNOWN_ERROR:
      {
        obj.innerHTML="未知错误。"
        break;}
    }
  }
}

在这里插入图片描述

四、使用静态图像在谷歌地图中显示位置

export class GeolocationComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  getLocation(){
    var obj=document.getElementById("show");
    if(navigator.geolocation){//判断浏览器是否兼容定位
    obj.innerHTML="该浏览器支持地理定位，正在追踪位置";
      navigator.geolocation.getCurrentPosition(this.showPosition,this.showError)
    }else{
      obj.innerHTML="该浏览器不支持HTML5的地理位置!";
    }
  }

  showPosition(position){//getCurrentPosition()成功的回调，则返回一个coordinates对象，即position
    var obj=document.getElementById("show");
    obj.innerHTML="纬度："+position.coords.latitude+"<br> 经度："+position.coords.longitude;
    var xx=position.coords.latitude+","+position.coords.longitude;
    var imgSrc="http://maps.googleapis.com/maps/api/staticmap?center="+xx+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("map").innerHTML=`<img src=${imgSrc}>`;
  }

  showError(error){
    var obj=document.getElementById("show");
    switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      {
        obj.innerHTML="用户拒绝对获取地理位置的请求。"
        break;}
    case error.POSITION_UNAVAILABLE:
      {
        obj.innerHTML="位置信息是不可用的。"
        break;}
    case error.TIMEOUT:
      {
        obj.innerHTML="请求用户地理位置超时。"
        break;}
    case error.UNKNOWN_ERROR:
      {
        obj.innerHTML="未知错误。"
        break;}
    }
  }
}

在这里插入图片描述

报告错误原因：请求被拒接，The Google Maps Platform server rejected your request. You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account

在angualr利用HTML5实现拖放与定位

Drag&&Drop

一、概述

Geolocation(地理定位)

一、概述

二、

三、使用地理位置简单示例

四、使用静态图像在谷歌地图中显示位置

猜你喜欢