vue 使用百度地图api_Vue前端开发——使用高德地图WebApi

要求： 实现关键字搜索

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

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

正确的开始方式

1. 到高德开放平台注册Key

高的官方地址文档

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

web 服务申请key

web端js api 申请key

服务调用，代码封装

1. 使用官网提供的 JSAPI Loader 进行加载；

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

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

1. 创建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)  }}

2. 封装组件-tao-input-map

使用组件

可绑定参数说明：

绑定字段特殊说明

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

效果如下图

绑定value-key返回所有参数

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