地图容器: // css要给此容器设置宽高 <div class="map_container"></div> 画图 data{ return { Clng:"120.267842", Clat:"30.19439", Flng:"120.267417907715", Flat:"30.19460105896", Tlng:"120.269302368164",

前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链家的周边,如图所示.  二 .原理分析 1.引入高德api,这个在之前的博客提到过,vue 调用高德地图. 2.使用地图的周边插件,这是  高德网站的api. AMap.PlaceSearch //地点搜索服务插件,提供某一特定地区的位置查询服务 在插件中的各种方法中选取了searchNearBy的

高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key <template> <div> <div id="iframe"> <iframe class="map-item" v-if="ismap" id="getAddress" @load=&

CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的key值"></script> <!--引入UI组件库(1.0版本) --> <script src="//webapi.amap.com/ui/1.0/main.js"></script> 配置externals 文件路径 bu

index.html <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" /> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=8692185c8954a7ed79ea5b6dabd7d8ba&plug

此插件文档及使用还不错 https://elemefe.github.io/vue-amap/ <template> <div class="amap-page-container" style="height:300px;"> <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo

一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk引入有两种方式,一种是页面直接引入 <script type="text/javascript" src="http://w

vue-amap | 基于 Vue 2.x 与高德的地图组件 参考:https://elemefe.github.io/vue-amap/#/

首先    npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({ // 高德的key key: 'you key', // 插件集合 plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale'

1. 思维导图 源文件:Vue路线图.xmind 参考文献 [1]. VueJs2.0建议学习路线 - lavyun - 博客园 [2]. Vue学习路线图 - 个人文章 - SegmentFault 思否 [3]. Vue 框架-01- 入门篇 图文教程 - 肖朋伟 - CSDN博客  

今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码云项目的地址:http://git.oschina.net/ye_a_rs/project-vue-ele/tree/master/src 用 vue init webpack 项目名称 创建一个项目 npm安装vue-amap组件 : npm install vue-amap --save 在ma

1.获取key值 注册成为高德开发者需要分三步: 第一步,注册高德开发者: 第二步,去控制台创建应用: 第三步,获取Key 2.修改配置文件  webpack.base.conf.js externals: { 'AMap': 'AMap' } 3.在index.html 中引入地图插件 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&quo

因为项目要求调用高德地图,就按照官方文档按部就班的捣鼓,这一路上出了不少问题. 前言: vue-cli,node环境什么的自己安装设置推荐一个博客:https://blog.csdn.net/wulala_hei/article/details/80488674 1,找一个磁盘,在里面git bash here 然后vue init webpack XXX(文件夹名字) 你        第一步:在test里面安装install 指令:1.npm install 2.npm install vu

前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下,我选择第二天重头来过,一定要找到什么原因... 结果!血的教训告诉我,记录教程的时候,一定要有实践基础,切不可敷衍了事,不然别人看你的文章只是在浪费时间. —————————— vue调用高德地图拢共分三步: 1.去高德开发者平台申请key: 2.安装vue-amap: 3.使用组件调用地图 1.注

先看最后实现的效果图 高德地图api文档 https://lbs.amap.com/api/javascript-api/summary 使用 1.在index.html里面引入高德地图js文件 2.引入之后我们就直接可以在vue组件里面使用了 创建initMap方法,在mounted钩子函数中调用 mounted(){ this.initMap() }, initMap(){ let that = this this.map = new AMap.Map('track-map', { zoom

项目中用到了高德地图的API以及UI组件库,因为是直接把引入script写在index.html中,项目打包后运行在服务器,用浏览器访问加载第一次时会非常慢,主要原因是加载高德地图相关的js(近一分钟),用户体验非常不好. 于是在网上找了些资料,改成异步加载的方式.以下是实现方案: 1.首先定义一个asyncLoadJs.js(这里用到了AMap和AMapUI): // 异步加载高德地图API export function loadMP() { const mp = new Promise(f

开发环境描述: Vue.js ElementUI 高德地图API 需求描述: 在新增地址信息的时候,我们需要根据input输入的关键字调用地图的输入提示API,获取到返回的数据,并根据这些数据生成下拉列表,选择某一个即获取当前的地址相关信息(包括位置名称.经纬度.街区.城市.id等信息). 如果不用鼠标选择,我们也可以按键盘上的上下方向键移动到目标地址,再按回车键选中目标地址. 实现方案分析: 1.使用Vue.js,为了复用性,我们考虑使用子组件来写. 2.当在input中输入关键字的时候,触发

前言 关于Vue 里面使用异步加载高德地图 项目中其实只有几处需要用到地图,不需要全局引入 在index文件中引入js会明显拖慢首屏加载速度,虽然可以使用异步加载script的方式解决,但是始终觉得不够优雅. 解决方案 1.创建一个AMap.js,路径'utils/AMap' export default function MapLoader () { // <-- 原作者这里使用的是module.exports return new Promise((resolve, reject) =>

1.安装 vue-amap我安装指定版本0.5.10的版本 npm i --save vue-amap@0.5.10 2.main.js中的配置 key申请地址教程:https://lbs.amap.com/api/javascript-api/guide/abc/prepare // 高德离线地图 import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ // 高德key key: 'd6eabb

VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.amap.com/ 2.在Vue-Cli中public下的index.html加入script 标签 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你申请的key