前言

el-amap只试用于JSAPI 1.4.15，简易开发试用，JSAPI 2.0版本需原生引入。
#1.下载vue-amap

npm run vue-amap --save
cnpm run vue-amap --save

2.去高德地图申请key

https://console.amap.com/dev/index
在我的应用中创建应用

3.在src的main.js文件中引入

//高德地图
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({key: '在高德地图申请的key',// 插件集合 （插件按需引入）plugin: ["AMap.Autocomplete", //输入提示插件"AMap.PlaceSearch", //POI搜索插件"AMap.Scale", //右下角缩略图插件 比例尺"AMap.OverView", //地图鹰眼插件"AMap.ToolBar", //地图工具条"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制"AMap.PolyEditor", //编辑 折线多，边形"AMap.CircleEditor", //圆形编辑器插件"AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置]
});

4.使用

<el-amapref="map"vid="amapDemo":amap-manager="amapManager":events="mapEvents":center="center"expandZoomRange="true":zoom="zoom":plugin="plugins":pitch="66"><el-amap-marker :position="center" :icon="icon"> </el-amap-marker>
</el-amap><script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
data() {return {
center: [119.72899, 30.254775],
plugins: [{enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 100, //超过10秒后停止定位，默认：无穷大maximumAge: 0, //定位结果缓存0毫秒，默认：0convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true, //显示定位按钮，默认：truebuttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：fextensions: "all",//地图定位按钮pName: "Geolocation",init(o) {// o 是高德地图定位插件实例o.getCurrentPosition((status, result) => {console.log(result);if (result && result.position) {self.lng = result.position.lng;self.lat = result.position.lat;self.center = [self.lng, self.lat];self.loaded = true;self.$nextTick();}});},},{//地图工具条pName: "ToolBar",init(o) {},},{//左下角缩略图插件 比例尺pName: "Scale",init(o) {},},],
};},

点坐标

<el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position"></el-amap-marker>

折线

<el-amap-polyline :path="polyline.path"></el-amap-polyline>

多边形

<el-amap-polygon v-for="(polygon,index)  in polygons" :key="index" :path="polygon.path" :events="polygon.events"></el-amap-polygon>

圆

<el-amap-circle v-for="(circle,index) in circles" :key="index" :center="circle.center" :radius="circle.radius"></el-amap-circle>

图片覆盖物

<el-amap-ground-image v-for="(groundimage,index) in groundimages" :key="index" :url="groundimage.url" :bounds="groundimage.bounds"></el-amap-ground-image>

文本

<el-amap-text v-for="(text,index) in texts" :key="index"></el-amap-text>

贝塞尔曲线

<el-amap-bezier-curve v-for="(line,index) in lines" :key="index"></el-amap-bezier-curve>

圆点标记

<el-amap-circle-marker v-for="(marker,index) in markers" :key="index"></el-amap-circle-marker>

椭圆

<el-amap-ellipse v-for="(ellipse,index) in ellipses" :key="index"></el-amap-ellipse>

矩形

<el-amap-rectangle v-for="(rectangle,index) in rectangles" :key="index"></el-amap-rectangle>

信息窗体

<el-amap-info-window v-for="( window,index) in windows" :key="index" :position="window.position" :content="window.content" :open="window.open"></el-amap-info-window>

Search-Box

<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
<el-amap vid="amapDemo">
</el-amap>

el-amap的使用相关推荐

Taglib原理和实现：再论El和JST
作者: WalkingWithJava 出处: Java研究组织问题:你想和JSTL共同工作.比如,在用自己的标签处理一些逻辑之后,让JSTL处理余下的工作. 看这个JSP例子: <% Str ...
js去el的map_转：el表达式获取map对象的内容 js中使用el表达式 js 中使用jstl 实现 session.removeattribute...
原文链接: 总结: el表达式获取map对象的内容后端: HashMap map1 = new HashMap(); map1.put("key1","lzsb&quo ...
JSP中是EL表达式与JSTL
EL语法:${ } EL取值来自于作用域对象 1.如何从指定作用域取值(默认从最小作用域取值) pageScope.requestScope.sessionScope.applicationScope ...
SpringMVC学习手册(三)------EL和JSTL(上)
1.含义 EL: Expression Language , 表达式语言 JSTL: Java Server Pages Standard Tag Library, JSP标准标签库 ...
java,js,jstl,EL的简单交互
EL全名Expression Language.EL提供了在JSP脚本编制元素范围外使用运行时表达式的功能. 脚本编制元素是指页面中能够用于在JSP文件中嵌入java代码的元素. JSP标准标记库(j ...
关于ognl+struts-tag与el+jstl互相代替，以及el和jstl的学习笔记
昨晚在晚上看了许多文章,众多大牛说OGNL性能不行云云,乍一看似乎惨不忍睹,如下图: 于是考虑是否能使用EL+JSTL代替实现前台的标签. 以最近测试用的简单留言板的查看文章页面为例,以下皆省略get ...
JSP中的EL表达式详细介绍
2019独角兽企业重金招聘Python工程师标准>>> 一.JSP EL语言定义 EL 提供了在 JSP 脚本编制元素范围外使用运行时表达式的功能.脚本编制元素是指页面中能够用于在 ...
JSTL+EL表达式方法获取Oracle的Clob字段内容
我们在页面获得数据的时候一般的类型还是很好获得的,但是一遇到Clob类型就比较麻烦,最常用的方法是用一个流将其读取出来.使用MVC框架的时候这些都是无所谓的事情,因为反正是写在java类中怎么写都行, ...
JSP中EL表达式失效的问题
今天在jsp中使用el表达式,发现失效了,仔细检查发现bean并无问题.最后知道,jsp默认不使用el表达式,在头部标签添加设置isELIgnored为false即可 . <%--isELIgn ...
bmaplib vue 调用_Vue-cli3/4中使用AMap、BMap
首先国内三大地图服务商高德地图(AMap)腾讯地图(qqmap) 百度地图(BMap) 其中AMap 和 qqmap 使用的坐标系为 GCJ02 火星坐标系 BMap使用的坐标系为 BD09 百度 ...

el-amap的使用

前言

2.去高德地图申请key

3.在src的main.js文件中引入

4.使用

点坐标

折线

多边形

圆

图片覆盖物

文本

贝塞尔曲线

圆点标记

椭圆

矩形

信息窗体

Search-Box

el-amap的使用相关推荐

最新文章

热门文章