高德地图百度地图腾讯地图使用

本文最后更新于：2023年10月4日晚上

地理定位

定位基础与原理

IP定位

移动运营商基站定位

GPS卫星定位

定位的获取

地理定位API允许用户向web应用程序提供他们的位置，但这个操作需要用户授权。获取客户端位置相关代码如下：

// 获取封装用户定位信息的geolocation对象
let gl = window.navigator.geolocation;
// 调用方法，获取设备当前位置
gl.getCurrentPosition((result) => {
  console.log(result);
});

getCurrentPosition方法将会通过回调返回封装位置信息的result，这个result是GeolocationPosition对象，主要包含以下属性：

coords: GeolocationCoordinates

accuracy: 150 定位准确度

altitude: 海拔高度

altitudeAccuracy: 海拔准确度

latitude: 31.230416 纬度

longitude: 121.473701 经度

speed: 速度

timestamp: 1623142281023 定位的时间戳

接入第三方位置服务平台

百度地图：JS API 类参考

高德地图

腾讯地图

一旦接入了这些第三方位置服务平台，可以方便的在自己的网页中嵌入地图控件。引入这些第三方位置服务的js库后，还可以方便的操作这些地图。显示地图内容、在地图中添加大头针、通过位置web服务实现公交路线查询、驾车路线查询、地址解析、逆地址解析等等功能。

百度地图`JSAPI`

百度地图jsAPI是一套基于Javascript开发的应用程序接口。支持PC、小程序、移动端地图开发。

详见百度地图官方文档

基本使用方法

登录百度地图开放平台，创建应用，申请秘钥。

创建应用，申请开发者秘钥。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        height: 400px;
        width: 400px;
        margin: 100px auto;
      }
    </style>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=3.0&ak=w5VlGDoizEBhueAzOymyI44bcydyh1Tf"
    ></script>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
      var map = new BMap.Map("container");
      // 创建地图实例
      var point = new BMap.Point(116.404, 39.915);
      // 创建点坐标

      // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true);
      //开启鼠标滚轮
      //   map.addEventListener("click", function () {
      //     alert("您点击了地图。");
      //   });
      //点击地图事件
      let p1 = new BMap.Point(106.52546, 29.521285); //测试谢家湾广场A坐
      let p2 = new BMap.Point(106.361294, 29.400541); //测试九龙西苑
      console.log(map.getDistance(p1, p2)); //算出2个点的距离

      let ctrl = new BMap.NavigationControl({
        enableGeolocation: true, //显示导航控件
      });

      let geoc = new BMap.Geocoder(); //创建地址解析对象
      //解析出地址
      geoc.getLocation(p1, (result) => {
        // console.log(result);
      });
      //解析出经度，纬度
      geoc.getPoint("重庆市大渡口区幸福华庭", (result) => {
        console.log(result);
        let lat = result.lat;
        let lng = result.lng;
        let p3 = new BMap.Point(lng, lat); //创造一个Point对象
        map.centerAndZoom(p3, 15); //设置当前的位置
        let marker = new BMap.Marker(p3, {
          //   enableDragging: true, //是启用拖拽
        });
        map.addOverlay(marker);
      });

      //添加控件
      map.addControl(ctrl);
    </script>
  </body>
</html>

拖放

拖放是将对象从一个位置拖拽到另外一个位置的操作。任何HTML元素都可以进行拖放操作。但为了保证兼容性，建议在拖放的对象上添加属性：draggable=true，一旦包含这个属性，当前元素将支持拖放操作。

1	`<p draggable="true">内容文本</p>`

拖拽相关事件 - `DragEvent`

DragEvent指拖拽事件，其继承自MouseEvent和Event接口。

拖拽事件涉及到的事件源有两大类：源对象（当前拖拽的对象）、目标对象（目标容器对象）。那么在拖拽的过程中针对源对象与目标对象都会触发相关的拖拽事件，只需要捕获这些事件，在事件处理函数中编写业务逻辑即可。

源对象事件

dragstart 开始拖拽时执行

drag 拖拽过程中不断执行

dragend 结束拖拽时执行

目标对象事件

dragenter 当拖拽源对象进入目标对象时触发

dragover 当拖拽源对象悬停在目标对象上时触发

dragleave 当拖拽源对象离开目标对象时触发

drop 当在目标对象中事件源对象时触发

注意：

在dragover事件处理函数中需要加入：event.preventDefault()阻止浏览器的默认事件处理方式，否则不会触发目标对象的drop事件。

firefox浏览器针对图像与a有浏览器默认处理方式（重新打开一个新的tab页面），需要阻止该浏览器默认事件，所以需要在drop事件处理函数中：
1
2
event.preventDefault();
event.stopPropagation();

拖拽过程中的数据传输

在拖拽过程中，经常性的需要在开始拖拽的时候存一些数据，等到drop的时候获取这些数据，通过这些实时的参数执行后续业务。

步骤 1：在开始拖拽时，存入数据：

p.ondragstart = (event)=>{
    let dt = event.dataTransfer   // 数据传输器
    dt.setData('tagname', 'p')
    dt.setData('html', '内容')
    ......
}

步骤 2：在drop时，取出当时存的数据：

div.ondrop = (event)=>{
    let dt = event.dataTransfer;
    dt.getData('tagname')  =>  'p'
    dt.getData('html')  => '内容'
}

实现拖拽上传文件

文件上传流程与协议规范

文件上传流程

客户端选择要上传的文件，点击上传，开始建立连接，准备上传。

服务端接收连接请求，完成连接的建立，接收上传文件（遵守通信协议）

服务端把接收到的文件数据，存入服务器文件系统（d:/xxx.mp4）

传输结束，保存完后即上传成功。

客户端可以通过一个特殊的链接地址，访问以前上传过的数据。

上传通信协议规范（http）

要求客户端上传文件请求方式必须是post。

发送请求时必须携带消息头：Content-Type:multipart/form-data

客户端将读取本地文件，并且把文件内容以字节流的方式写给服务端。

服务端将会接收请求数据，解析文件，存储到服务器文件系统。

具体实现步骤

客户端：

准备好一个网页，编写div，接收拖拽进来的文件数据。
1
2
drop:
	let files = event.dataTransfer.files
遵守上传文件的协议规范，发送http请求，将文件数据发给服务器。
1
2
3
4
5
let formData = new Formdata(); // 用于封装表单参数
formData.append("name", "zs");
formData.append("pwd", "1234");
formData.append("uploadFile", filelist[0]);
axios.post("http://localhost:3000/upload", formData);
服务端返回响应数据后，接收返回回来的结果，执行后续业务。

服务端： uploadserver

解压，并启动uploadserver服务：node index.js

如何访问上传的资源

最基础访问方法：

服务端直接把upload文件夹设置为静态托管目录。
客户端发送请求，可以直接访问静态资源：
1
http://ip:port/52345-23452345-234523-452342-345235.jpg

如何在用户上传了头像后，可以在用户登录的时候看到用户上传的头像？

一旦头像上传成功，把生成的头像路径存入数据库，与当前用户绑定在一起：
1
2
3
id    name    age    pwd    avatar
1     zs      11     1234   null
2     ls      12     1234   435234-523452345-3245.jpg
当下次ls登录时，获取服务端存储的用户的详细信息（包括头像），直接通过upload文件夹访问该静态资源即可。

百度地图`JSAPI`

百度地图jsAPI是一套基于Javascript开发的应用程序接口。支持PC、小程序、移动端地图开发。

详见百度地图官方文档

基本使用方法

登录百度地图开放平台，创建应用，申请秘钥。

创建应用，申请开发者秘钥。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        height: 400px;
        width: 400px;
        margin: 100px auto;
      }
    </style>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=3.0&ak=w5VlGDoizEBhueAzOymyI44bcydyh1Tf"
    ></script>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
      var map = new BMap.Map("container");
      // 创建地图实例
      var point = new BMap.Point(116.404, 39.915);
      // 创建点坐标

      // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true);
      //开启鼠标滚轮
      //   map.addEventListener("click", function () {
      //     alert("您点击了地图。");
      //   });
      //点击地图事件
      let p1 = new BMap.Point(106.52546, 29.521285); //测试谢家湾广场A坐
      let p2 = new BMap.Point(106.361294, 29.400541); //测试九龙西苑
      console.log(map.getDistance(p1, p2)); //算出2个点的距离

      let ctrl = new BMap.NavigationControl({
        enableGeolocation: true, //显示导航控件
      });

      let geoc = new BMap.Geocoder(); //创建地址解析对象
      //解析出地址
      geoc.getLocation(p1, (result) => {
        // console.log(result);
      });
      //解析出经度，纬度
      geoc.getPoint("重庆市大渡口区幸福华庭", (result) => {
        console.log(result);
        let lat = result.lat;
        let lng = result.lng;
        let p3 = new BMap.Point(lng, lat); //创造一个Point对象
        map.centerAndZoom(p3, 15); //设置当前的位置
        let marker = new BMap.Marker(p3, {
          //   enableDragging: true, //是启用拖拽
        });
        map.addOverlay(marker);
      });

      //添加控件
      map.addControl(ctrl);
    </script>
  </body>
</html>

异步加载百度地图

bdmap.js

export default function loadBMap(ak) {
  return new Promise(function (resolve, reject) {
    if (typeof BMap !== "undefined") {
      resolve(BMap);
      return true;
    }
    window.onBMapCallback = function () {
      resolve(BMap);
    };
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "https://api.map.baidu.com/api?v=3.0&ak=" +
      ak +
      "&callback=onBMapCallback";
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

BdMap.vue

<template>
  <div class="map-area" :id="mapId" v-if="dataDetail"></div>
</template>
<script>
  import loadBMap from "./map";
  export default {
    data() {
      return {
        mapId: "BMap-" + parseInt(Date.now() + Math.random()),
        Map: null,
        address: "",
        point: null,
        city: "",
        platform_id: "",
      };
    },
    props: ["dataDetail"],
    watch: {
      dataDetail: {
        handler: function (newValue, oldValue) {
          // console.log(newValue);
          this.address = newValue.address;
          if (this.address) {
            this.city = this.address.substring(0, 3);
          }
          this.initMap();
        },
        immediate: true,
        deep: true,
      },
    },
    create() {
      this.initMap();
    },
    methods: {
      initMap() {
        loadBMap("w5VlGDoizEBhueAzOymyI44bcydyh1Tf").then(() => {
          // 百度地图API功能
          this.Map = new BMap.Map(this.mapId); // 创建Map实例
          // this.Map.centerAndZoom(new BMap.Point(106.520911, 29.512809), 15); // 初始化地图,设置中心点坐标和地图级别
          //添加地图类型控件
          this.Map.addControl(
            new BMap.MapTypeControl({
              mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
            })
          );

          //创建地址解析器实例
          var myGeo = new BMap.Geocoder();
          // 将地址解析结果显示在地图上，并调整地图视野
          myGeo.getPoint(
            this.address,
            (point) => {
              if (point) {
                this.point = point;
                // this.Map.setCurrentCity(this.city); // 设置地图显示的城市 此项是必须设置的
                // this.Map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                this.Map.centerAndZoom(this.point, 18); //初始化地图
                //添加标注
                let Market = new BMap.Marker(this.point);
                this.Map.addOverlay(Market);
                //信息窗口设置
                var opts = {
                  width: 200, // 信息窗口宽度
                  height: 50, // 信息窗口高度
                  title: "详细地址:", // 信息窗口标题
                  message: this.address,
                };
                var infoWindow = new BMap.InfoWindow(this.address, opts); // 创建信息窗口对象
                Market.addEventListener("click", () => {
                  this.Map.openInfoWindow(infoWindow, this.point); //开启信息窗口
                });
              } else {
                alert("您选择的地址没有解析到结果！");
              }
            },
            this.city
          );
        });
      },
    },
  };
</script>
<style scoped>
  @media screen and (max-width: 768px) {
    .map-area {
      width: 250px;
      height: 250px;
    }
  }
  @media screen and (min-width: 768px) {
    .map-area {
      width: 400px;
      height: 400px;
    }
  }
</style>

html

<div class="labelWrap disFlex">
  <label class="marR10">来源地址:</label>
  <el-button size="mini" :plain="true" @click="copyText">点击复制</el-button>
</div>

js

// 点击复制文本
    copyText() {
      this.platform_id = this.dataDetail.platform_id;
      this.$message({
        showClose: true,
        message: "恭喜你，复制成功",
        type: "success"
      });
      var input = document.createElement("input"); // js创建一个input输入框
      input.value = this.platform_id; // 将需要复制的文本赋值到创建的input输入框中
      document.body.appendChild(input); // 将输入框暂时创建到实例里面
      input.select(); // 选中输入框中的内容
      document.execCommand("Copy"); // 执行复制操作
      document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
    },

JavaScript

#JavaScript #map

高德地图百度地图腾讯地图使用

https://pythl.com/archives/81449a90.html

作者

晚生隆海

发布于

2019年12月28日

更新于

2023年10月4日

许可协议

Vue3快速上手上一篇

Promise理解和使用下一篇

高德地图 百度地图 腾讯地图使用

地理定位

定位基础与原理

定位的获取

接入第三方位置服务平台

百度地图JSAPI

基本使用方法

拖放

拖拽相关事件 - DragEvent

拖拽过程中的数据传输

实现拖拽上传文件

文件上传流程与协议规范

具体实现步骤

如何访问上传的资源

百度地图JSAPI

基本使用方法

异步加载百度地图

bdmap.js

BdMap.vue

高德地图百度地图腾讯地图使用

百度地图`JSAPI`

拖拽相关事件 - `DragEvent`

百度地图`JSAPI`