Vue前端开发—使用高德地图WebApi

基于Vue(2.x)+element+高德Web服务api(2.0)

高德地图2.0版本以前的实现方式需要自己封装请求方法高德地图api，2.0版本提供了个请求服务WebService，使用上简洁，简单了很多

正确的开始方式到高德开放平台注册Key

高的官方地址文档

当然了你需要先注册才可以去申请key,申请key 的时候看你需要选择需要的服务平台高德地图api，本文我们用web服务api,所以需要web服务的key

web 服务申请key

web端js api 申请key

服务调用高德地图api，代码封装1. 使用官网提供的 JSAPI Loader 进行加载；

2. 以常规 JavaScript 脚本的方式加载；

本文使用动态构建脚本JSAPI Loader 加载

创建remoteLoad.js 用于远程加载脚本export default function remoteLoad(url, hasCallback) {  return createScript(url)  /**   * 创建script   * @param url   * @returns {Promise}   */  function createScript(url) {    let scriptElement = document.createElement('script')    document.body.appendChild(scriptElement)    let promise = new Promise((resolve, reject) = {      scriptElement.addEventListener(        'load',        e = {          removeScript(scriptElement)          if (!hasCallback) {            resolve(e)          }        },        false      )      scriptElement.addEventListener(        'error',        e = {          removeScript(scriptElement)          reject(e)        },        false      )      if (hasCallback) {        window.____callback____ = function() {          resolve()          window.____callback____ = null        }      }    })    if (hasCallback) {      url += '&callback=____callback____'    }    scriptElement.src = url    return promise  }  /**   * 移除script标签   * @param scriptElement script dom   */  function removeScript(scriptElement) {    document.body.removeChild(scriptElement)  }}封装组件-tao-input-maptemplate  div    el-select v-model="schemaForm"               filterable               remote               clearable               v-bind="$attrs"               placeholder="请输入关键词"               :remote-method="remoteMethod"               :loading="loading"               @change="event('change',schemaForm)"               style="width:100%"      el-option v-for="item in optionsArr"                 :key="item.value"                 :label="item.name"                 :value="item|filterValue($attrs)"      /el-option    /el-select  /div/templatescriptimport remoteLoad from '../../utils/remoteLoad.js'export default {  name: 'tao-input-map',  props: {    value:{}  },  filters: {    filterValue(val, props) {      return props['value-key'] ? val : val.name    }  },  data() {    return {      AMapLoader: null,      AMap: null,      optionsArr: [],      loading: false    }  },  created() {    this.getInitMap()  },  computed: {    schemaForm: {      get() {        return this.value      },      set(val){}    }  },  methods: {    async getInitMap() {      if ((window.AMapLoader) !== undefined) {        this.initMap()      } else {        await remoteLoad(`

使用组件template  div    el-select v-model="schemaForm"               filterable               remote               clearable               v-bind="$attrs"               placeholder="请输入关键词"               :remote-method="remoteMethod"               :loading="loading"               @change="event('change',schemaForm)"               style="width:100%"      el-option v-for="item in optionsArr"                 :key="item.value"                 :label="item.name"                 :value="item|filterValue($attrs)"      /el-option    /el-select  /div/templatescriptimport remoteLoad from '../../utils/remoteLoad.js'export default {  name: 'tao-input-map',  props: {    value:{}  },  filters: {    filterValue(val, props) {      return props['value-key'] ? val : val.name    }  },  data() {    return {      AMapLoader: null,      AMap: null,      optionsArr: [],      loading: false    }  },  created() {    this.getInitMap()  },  computed: {    schemaForm: {      get() {        return this.value      },      set(val){}    }  },  methods: {    async getInitMap() {      if ((window.AMapLoader) !== undefined) {        this.initMap()      } else {        await remoteLoad(`可绑定参数说明：

绑定字段特殊说明

其他参数传递可以看element-ui 的select组件

效果如下图

绑定value-key返回所有参数

功能单一代码差不多都在上面了，不单独拿出来放源码了高德地图api。