vue-amap 是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。
-
数据状态与地图状态单向绑定
-
开发者无需关心地图的具体操作
安装
npm install -S vue-amap
快速上手
引入vue-amap
// 引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: 'YOUR_KEY',
// 插件集合
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 高德 sdk 版本，默认为 1.4.4
v: '1.4.4'
});
其他特性
-
支持自定义组件
-
支持官方 UI 组件库
-
前提：百度和高德地图都试过了，都是一片空白，但是点击元素可以显示地点详细信息样式。唯独底图瓦片不显示。 如果只是为了做展示用，不使用其他功能，可以直接引入原生百度地图 <template> <div id="map"> <div @click="init">查询</div> <!-- <el-input class="input" v-model="place" @change
-
vue3+ts+@vuemap/vue-amap实现获取当前用户位置并解析地址信息 /main.ts import { createApp } from "vue"; import App from "./App.vue"; import router from "@/router"; import VueAMap, { initAMapApiLoader } from "@vuemap/vue-
-
<template> <div> <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
-
本文向大家介绍vue异步加载高德地图的实现，包括了vue异步加载高德地图的实现的使用技巧和注意事项，需要的朋友参考一下 本文介绍了vue异步加载高德地图的实现，分享给大家，具体如下： 几种加载js的方式 同步加载 异步加载 延迟加载 同步加载 用的最多的一种方式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js
-
请教一下大佬们，按照官方的例子（官方只有 react 的例子），遇到了window is not defined报错，然后百度发现了一个相同的用户 https://juejin.cn/post/7229984415329108024 但是， 我按照他的方法接入是不报错了， 但是一直也没有正常显示出来 ===================updated============= 好像我把他的ama
-
本文向大家介绍AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录，包括了AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录的使用技巧和注意事项，需要的朋友参考一下 一、闲扯 有一天班长说了，同学们希望我开发一个可以共享位置的通讯录，于是自己简单设计了下功能。包括用户角色、发表微博、共享位置等等。这次也是有点私心的，为了锻炼
-
本文向大家介绍高德地图WEB版基础控件展示 原创，包括了高德地图WEB版基础控件展示 原创的使用技巧和注意事项，需要的朋友参考一下 之前想自己做一个旅游导航的项目，在网上一搜发现了高德地图开放平台，发现原来高德可以很简单的就应用到自己的项目里面，当即我就申请了一个key来学一学，仔细研究了一下，感觉还挺难的，网上找了找案例什么的，经过这几天，小编把高德的一些基础控件差不多弄了一下，效果图如下图所示
-
问题内容： 该脚本绘制控件，英雄，表面和地图： 有一个英雄，当玩家使用控件移动他时必须重新绘制，所有其他可绘制对象也必须重新绘制。问题在于绘制地图是一个漫长的过程，因此我创建的地图越大，英雄移动的速度就越慢，因为必须绘制地图的每个图块。有没有一种方法可以将所有图块以其他方法放置到一个位图，然后在canvas方法中绘制该位图？ 问题答案： 最好的选择是只绘制地图在屏幕上可见的部分。这样，无论整个地图
-
本文向大家介绍Vue-Cli 3.0 中配置高德地图的两种方式，包括了Vue-Cli 3.0 中配置高德地图的两种方式的使用技巧和注意事项，需要的朋友参考一下 vue 中使用高德地图有两种方式 一、vue-amap 组件 官网： https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的，但是尝试之后存在些问题，所以就放弃了，可能是我的使用
-
本文向大家介绍在vue中高德地图引入和轨迹的绘制的实现，包括了在vue中高德地图引入和轨迹的绘制的实现的使用技巧和注意事项，需要的朋友参考一下 高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） 2.第二步 以上就是轨迹绘制
-
侧边栏点击按钮隐藏之后，高德地图宽度不会自适应，导致左边留白 请问下，在监听侧边栏隐藏之后，高德地图能直接重绘宽度吗？ 点击蓝色按钮后