callback用法 js vue_Vue前端开发——使用高德地图WebApi
要求: 实现关键字搜索
说明: 基于Vue(2.x)+element+高德Web服务api(2.0)
高德地图2.0版本以前的实现方式需要自己封装请求方法,2.0版本提供了个请求服务WebService,使用上简洁,简单了很多
正确的开始方式
- 到高德开放平台注册Key
高的官方地址文档
当然了你需要先注册才可以去申请key,申请key 的时候看你需要选择需要的服务平台,本文我们用web服务api,所以需要web服务的key
web 服务申请key
web端js api 申请key
服务调用,代码封装
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-map
使用组件
可绑定参数说明:
绑定字段特殊说明
其他参数传递可以看element-ui 的select组件
效果如下图
绑定value-key返回所有参数
功能单一代码差不多都在上面了,不单独拿出来放源码了。
callback用法 js vue_Vue前端开发——使用高德地图WebApi相关推荐
- callback用法 js vue_Vue.js 实例方法
Vue 实例方法 实例属性 1.组件树访问 1-1.vm.$parent 用来访问当前组件实例的父实例,如果当前实例有的话 1-2.vm.$root 当前组件树的根 Vue 实例.如果当前实例没有父实 ...
- 前端系列——vue2+高德地图web端开发(poi搜索两种方式)
前端系列--vue2+高德地图web端开发(poi搜索) 前言 基础 什么是poi搜索 1. 输入提示结合poi搜索 官方代码 步骤 1.进行plugins插件注册 2.data中编写placeSea ...
- JS高级前端开发群加群说明
http://www.cnblogs.com/jikey/p/4426105.html JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年 ...
- JS高级前端开发群加群说明及如何晋级
一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在"前端开发"关键字搜索结果第一名.当然取得这样的成绩或这样一个结果也是情理之中,一方面来说,提倡的各种交流沟通方法大部分 ...
- Vue.js高效前端开发知识 • 【目录】
持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...
- Vue.js 现代前端开发的利器
Vue.js: 现代前端开发的利器 作者:阿发家的阿花 引言 在当今的前端开发领域,Vue.js已经成为最受欢迎的JavaScript框架之一.它的简洁性.灵活性和强大的功能使其成为许多开发者首选的工 ...
- 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯...
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
- 项目 - Web地图开发【高德地图API】(一)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
- 使用plugman开发cordova 高德地图定位插件
在开发的过程中我们更多的是使用别人开发的cordova插件,但是在使用的过程中经常会遇到一些不合自己心意的问题,那么我们就来使用plugman开发一个属于自己的cordova插件吧. 源码地址 : h ...
最新文章
- elasticsearch date_histogram
- 《HTML5 界面设计与开发》 读书笔记
- Pandas简明教程:五、Pandas简单统计操作及通用方式
- sharepoint 场帐号修改密码
- spring boot 异常汇总
- 黑科技小程序,无需前台登记直接刷脸秒住酒店!
- 组播IP地址到底是谁的IP?
- mysql常用操作记录
- JavaGC(1)—深入浅出Java垃圾回收机制
- 激活BI Content
- VMware vSphere 5.5的12个更新亮点(1)
- mysql alter auto increment_将MySQL列更改为AUTO_INCREMENT
- kubuntu18.04 重装显卡驱动后无法进入桌面
- iphone手机 ios系统 无法更新app 跳转到AppStore 显示 打开
- 12,jesd204b实战操作笔记
- unity 视频录制总结
- 如何买到货真价实的OA产品?
- 关于行人重识别方法PCB《Beyond Part Models: Person Retrieval with Refined Part Pooling 》及代码实现解读
- 华为S5700实战配置
- 游戏被攻击了怎么办,有没有什么好的解决办法