初次使用高德地图api的一些配置(vue+高德JSAPI)-一一网

初次使用高德地图api的一些配置(vue+高德JSAPI)

官网提供了相关的配置，这里提供我自己的配置，仅供参考

官网地址

1.注册账号并申请Key

见官方文档

2配置key和安全密匙

我使用的是方式二——” key搭配静态安全密钥以明文设置（不安全，建议开发环境用）” 和 “按 NPM 方式使用 Loader”

官网html版本：

添加script脚本

// 增加代理服务器设置脚本标签(必须在加载loader.js前)
<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'「您申请的安全密钥」',
        }
</script>
// 加载loader.js
<script src="https://webapi.amap.com/loader.js"></script>
复制代码

安装loader

npm i @amap/amap-jsapi-loader --save
复制代码

使用loader

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})
复制代码

vue版本：

在src文件夹下，新建utils文件夹，在utils文件夹下，新建gaode.js

/* JSAPI key搭配静态安全密钥以明文设置（不安全，建议只在开发环境使用) */
import AMapLoader from '@amap/amap-jsapi-loader';

const securityJsCode = 'xxxxxxxx'; // 您申请的安全密钥
const key = 'xxxxxxxx'; // 申请好的Web端开发者Key，首次调用 load 时必填
const version = '2.0'; // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
const adress = 'https://webapi.amap.com/loader.js'; // 代理服务器地址

window._AMapSecurityConfig = {
  securityJsCode // 您申请的安全密钥
};

/**
 * 载入地图
 * @param {*} plugins 地图配置项
 * @returns promise
 */
const mapLoader = plugins =>
  AMapLoader.load({
    key, // 申请好的Web端开发者Key，首次调用 load 时必填
    version, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  });

// 动态创建script标签，引入代理服务器
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = adress;
document.body.appendChild(script);

// 导出用来载入地图的函数
export default mapLoader;

复制代码

由于AMapLoader.load是一个promise，这里将它的then和catch部分拆分出去

3.准备一个地图容器

官方html版本：

<div id="container"></div> 
复制代码

#container {width:300px; height: 180px; } 
复制代码

vue版本：

新建组件MyMap.vue并在App.vue中挂载

<template>
  <div :class="$style.root">
    <!-- 放置地图的容器 -->
    <div :class="$style.container" id="container" :style="{ width: width + 'px', height: height + 'px' }"></div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      width: 1000, // 地图宽度
      height: 600, // 地图高度
  };
},
<style lang="scss" module>
.root {
  width: 1920px;
  height: 1080px;
}
</style>
复制代码

4.创建一个地图(并展示)

官方html版本：

var map = new AMap.Map('container', {
    resizeEnable: true, //是否监控地图容器尺寸变化
    zoom:11, //初始化地图层级
    center: [116.397428, 39.90923] //初始化地图中心点
});
复制代码

vue版本：

在data里添加数据容器

data() {
  return {
    AMap: null, 
    map: null,
    width: 1000, // 地图宽度
    height: 600, // 地图高度
    plugins: [
      'AMap.Scale' /*比例尺*/,
      'AMap.ToolBar' /*工具栏*/,
      'AMap.Marker' /*标记*/,
      'AMap.Geolocation' /*定位*/,
      'AMap.MapType' /*图层切换*/
    ], // 地图插件
    config: {
      resizeEnable: true, // 地图初始化时定位到当前城市(会被center覆盖)
      // center: [], // 地图中心点
      zoom: 10, //设置地图的缩放级别
      mapStyle: 'amap://styles/normal' //设置地图的显示样式
    } // 地图配置项
  };
},
复制代码

提供初始化地图的方法createMap

// 初始化地图
async createMap() {
  try {
    // 让地图独立(防止需要多张地图)，在当前组件私有化一个AMap
    this.AMap = await mapLoader(this.plugins);
    
    // promise的then部分
    this.map = new AMap.Map('container', this.config);
  } catch (e) {
    // promise的catch部分
    console.log(e);
  }
},
复制代码

提供异步同时加载多个插件的方法asnycLoaderPlugins

//异步同时加载多个插件
asnycLoaderPlugins(AMap, map, plugins) {
  AMap.plugin(plugins, function () {
    map.addControl(new AMap.Scale()); // 添加比例尺
    map.addControl(new AMap.ToolBar()); // 添加工具栏
    map.addControl(new AMap.MapType()); // 添加图层切换
    // map.add(
    //   new AMap.Marker({
    //     position: map.getCenter(),
    //     content: '<div style="fontSize:16px">1</div>' // 自定义点标记覆盖物内容
    //   })
    // ); // 添加标记
    // 高精度定位
    highAccuracyGeolocation(AMap, map);
    // 添加圆形覆盖物
    // map.add(
    //   new AMap.Circle({
    //     center: map.getCenter(), // 圆心位置
    //     radius: 1000, // 圆半径
    //     fillColor: 'red', // 圆形填充颜色
    //     strokeColor: '#fff', // 描边颜色
    //     strokeWeight: 2 // 描边宽度
    //   })
    // );
  });
复制代码

在单独js文件中导出高精度定位方法highAccuracyGeolocation

高精度定位一般在初始化时就会使用，因为默认只会定位到当前所在城市
浏览器需要打开定位权限
chrome可能无法使用高精度定位，这里使用firefox可以使用
参见官方Geolocation定位失败的原因
这里之所以以js文件的形式导入函数，主要是回调函数存在this指向问题
高精度定位属于插件加载，在asnycLoaderPlugins方法中调用

/**
 * 高精度定位
 * @param {*} AMap
 * @param {*} map
 */
const highAccuracyGeolocation = (AMap, map) => {
  // 初始化后定位到本地(高精度定位，chrome会失败，firefox能成功)
  var geolocation = new AMap.Geolocation({
    // 是否使用高精度定位，默认：true
    enableHighAccuracy: true,
    // 设置定位超时时间，默认：5s
    timeout: 10000,
    // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
    buttonOffset: new AMap.Pixel(10, 20),
    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    zoomToAccuracy: true,
    //  定位按钮的排放位置,  RB表示右下
    buttonPosition: 'RB'
  });

  map.addControl(geolocation);
  geolocation.getCurrentPosition();
  geolocation.on('complete', onComplete);
  geolocation.on('error', onError);

  function onComplete(data) {
    // data是具体的定位信息
    console.log(data);
  }

  function onError(data) {
    // 定位出错
    console.log(data);
  }
};

export default highAccuracyGeolocation;

复制代码

5.使用MouseTool画圆求面积

注意官网是提供了这些插件的，见距离、长度、面积
这里只是试图自己提供一个方法

鼠标左键按住拖动画圆，松开左键完成画圆，鼠标右键清除所画的圆

/**
 * 画圆获取信息
 * @param {*} AMap
 * @param {*} map
 */
function getMessageByDrawCircle(AMap, map) {
  map.plugin('AMap.MouseTool', () => {
    //在地图中添加MouseTool插件
    const mouseTool = new AMap.MouseTool(map);

    //用鼠标工具画圆
    mouseTool.circle();

    // 添加事件
    mouseTool.on('draw', function (e) {
      // console.log(e.obj);
      if(e.obj.getRadius()===0) return
      console.log('圆的半径' + e.obj.getRadius()); //获取半径
      console.log('圆的面积' +e.obj.getArea()); //获取面积
      console.log('圆心的纬度' +e.obj.getCenter().getLat()); //获取中心点的纬度
      console.log('圆心的经度' +e.obj.getCenter().getLng()); //获取中心点的经度
    });
    const container = document.getElementById('container');
    container.oncontextmenu = function (e) {
      //点击右键后要执行的代码
      mouseTool.close(true);
      getMessageByDrawCircle(AMap, map)
      return false; //阻止浏览器的默认弹窗行为
    };
  });
}

export default getMessageByDrawCircle;

复制代码

6.组件的完整代码

<template>
  <div :class="$style.root">
    <!-- 放置地图的容器 -->
    <div :class="$style.container" id="container" :style="{ width: width + 'px', height: height + 'px' }"></div>
  </div>
</template>

<script>
import mapLoader from '@/utils/gaode';
import highAccuracyGeolocation from '@/utils/highAccuracyGeolocation';
import getMessageByDrawCircle from '@/utils/getMessageByDrawCircle';
export default {
  mounted() {
    this.createMap();
  },
  data() {
    return {
      AMap: null,
      map: null,
      width: 1000, // 地图宽度
      height: 600, // 地图高度
      plugins: [
        'AMap.Scale' /*比例尺*/,
        'AMap.ToolBar' /*工具栏*/,
        'AMap.Marker' /*标记*/,
        'AMap.Geolocation' /*定位*/,
        'AMap.MapType' /*图层切换*/
      ], // 地图插件
      config: {
        resizeEnable: true, // 地图初始化时定位到当前城市(会被center覆盖)
        // center: [], // 地图中心点
        zoom: 10, //设置地图的缩放级别
        mapStyle: 'amap://styles/normal' //设置地图的显示样式
      } // 地图配置项
    };
  },
  methods: {
    // 初始化地图
    async createMap() {
      try {
        this.AMap = await mapLoader(this.plugins);
        this.map = new AMap.Map('container', this.config);
        //异步加载插件
        this.asnycLoaderPlugins(this.AMap, this.map, this.plugins);
        getMessageByDrawCircle(this.AMap, this.map);
      } catch (e) {
        console.log(e);
      }
    },
    //异步同时加载多个插件
    asnycLoaderPlugins(AMap, map, plugins) {
      AMap.plugin(plugins, function () {
        map.addControl(new AMap.Scale()); // 添加比例尺
        map.addControl(new AMap.ToolBar()); // 添加工具栏
        map.addControl(new AMap.MapType()); // 添加图层切换
        // map.add(
        //   new AMap.Marker({
        //     position: map.getCenter(),
        //     content: '<div style="fontSize:16px">1</div>' // 自定义点标记覆盖物内容
        //   })
        // ); // 添加标记
        // 高精度定位
        highAccuracyGeolocation(AMap, map);
        // 添加圆形覆盖物
        // map.add(
        //   new AMap.Circle({
        //     center: map.getCenter(), // 圆心位置
        //     radius: 1000, // 圆半径
        //     fillColor: 'red', // 圆形填充颜色
        //     strokeColor: '#fff', // 描边颜色
        //     strokeWeight: 2 // 描边宽度
        //   })
        // );
      });
    }
  }
};
</script>

<style lang="scss" module>
.root {
  width: 1920px;
  height: 1080px;
}
</style>

复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端