@Amap/Amap-vue使用(踩坑)记录_StellaXiao98的博客-程序员宅基地

技术标签: 前端  vue.js  map  javascript  

官方文档:https://jimnox.gitee.io/amap-vue/references/map/

Amap是封装好的高德地图组件,易于使用。但私心说一句,不熟悉高德地图原生API的话,Amap-vue的官方文档对新手来讲不是很细致,还是多参考高德官方文档,对照着学习。

安装:

 npm install --save @amap/amap-vue

main.js

import AmapVue from '@amap/amap-vue';

AmapVue.config.version = '2.0'; 
AmapVue.config.key = 'xxxx';//申请的AMapKey
AmapVue.config.plugins = [
  'AMap.Autocomplete',
  'AMap.PlaceSearch',
  'AMap.Scale',
  'AMap.OverView',
  'AMap.ToolBar',
  'AMap.MapType',
  'AMap.PolyEditor',
  'AMap.CircleEditor',
  'AMap.Geocoder',
  'AMap.MarkerClusterer'
];
Vue.use(AmapVue);

基本使用:

<amap :zoom='11' :center="centerPos">
    <amap-marker :position="markerPos" />
</amap>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/StellaXiao98/article/details/120080799

智能推荐

不可不知的资源管理调度器Hadoop Yarn_大数据学习与分享的博客-程序员宅基地_指出采用哪种资源管理调度器进行资源管理调度

Yarn(Yet Another Resource Negotiator)是一个资源调度平台,负责为运算程序如Spark、MapReduce分配资源和调度,不参与用户程序内部工作。同样是Master/Slave架构。以下图MapReduce提交到Yarn上运行为例,看看Yarn主要包括哪些核心组件以及每个组件的作用:全局资源管理器(ResourceManager)主节点,全局资源管理器,负...

听说最近你读过不少书 - java学习必读书单_chuixuan3775的博客-程序员宅基地

那些时光 噢,很久没有看过书了——此刻的你心里是否会发出这样的感慨? 我们总是怪工作太忙,总是怪应酬多、活动多;今天想着去哪玩,明天想着约妹纸……究竟什么时候会想着好好地静下心来翻一翻上面早已布满灰尘的书呢? 我理解,那部电视剧确实很精彩;我理解,那游戏确实很好玩。但是当某一天,你会...

TypeScript笔记(5)—— 基本数据类型_jcLee95的博客-程序员宅基地

TypeScript(5):基本数据类型1. let关键字JavaScript中使用关键字var来声明变量有很多的缺陷,首先一个就是var作用域的问题。比如:for (var i = 0; i &lt; 5; i++) { console.log('for循环内,迭代变量i=' + i) }console.log('for循环外:,迭代变量i=' + i)可想而知,由于使用var声明的变量作用域比较宽松,在for语句等一些语句中,由var声明的变量可能受到外部的干扰而导

influxdb写入mysql_InfluxDB学习之InfluxDB的HTTP API写入操作_勉强解惑强行胡诌的博客-程序员宅基地

HTTP API也有两种操作:写入和查询,本文就先给大家介绍一下 InfluxDB的HTTP API的写入操作方式。在InfluxDB学习的上一篇文章:InfluxDB学习之InfluxDB的基本操作中,我们提到 InfluxDB操作有三种方式,其中一种是HTTP API的方式。HTTP API也有两种操作:写入和查询,本文就先给大家介绍一下 InfluxDB的HTTP API的写入操作方式。更...

E010Web学习笔记-Tomcat_訾博ZiBo的博客-程序员宅基地

一、web相关概念回顾1、软件架构C/S架构:客户端/服务器端;B/S架构:浏览器/服务端;浏览器内含静态资源解析引擎;浏览器请求数据,服务器响应来自浏览器的请求;2、资源分类静态资源:每个用户访问后得到的结果是一样的;直接返回给浏览器,浏览器内含静态资源解析引擎;如:html,css,js;动态资源:每个用户访问相同资源后得到的结果可...

winform窗体中嵌入网页(DHTML代码和winfrom应用程序交互)_wangchaoqi1985的博客-程序员宅基地_winform中嵌入html

本文转载自:https://www.cnblogs.com/charles2008/archive/2009/08/08/1541968.html 作者:Charles2008 转载请注明该声明。 在开发RFID项目中,看到同事在winform中加入网页。界面用Css和JavaScript做出来的效果很不错,比直接用winform做出来的效果好得多。更何况winform在页面表现上...

随便推点

设计模式-责任链设计模式-案例1_信仰_273993243的博客-程序员宅基地

责任链设计模式本节要讲的并非传统意义的责任链:为了避免请求发送者与多个请求处理者耦合在一起,将所有请求的处理者通过前一对象记住其下一个对象的引用而连成一条链;当有请求发生时,可将请求沿着这条链传递,直到有对象处理它为止。也就是说:用户发起一个请求,之后请求上链,如果当前处理者可以处理该请求,那么就直接处理;否则当前处理者把请求转发给下一个处理者。 本节要讲的是责任链的一种变形,叫做功能链,这种设计模式特别常用,随处可见,用途十分广泛。这种模式是:一个链上有多个处理逻辑,一个请求到来会被所有逻辑处理,最后返

python--CSDN爬虫_呼的一声飞的好远好远的博客-程序员宅基地

 # encoding:utf-8__author__ = 'Sun'import reimport urllib.requestimport urllibimport queueimport threadingimport osqueue = queue.Queue()visited = set()cnt = 0class CsdnBlogSpider(th...

Python爬虫三_hhh江月的博客-程序员宅基地

Python爬虫三import requests"""a picture"""url = "https://tse1-mm.cn.bing.net/th/id/R-C.6ec4d1779202538cc345b75bf51681da?rik=Xo5KuGF1r3%2bd%2bA&amp;riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f40083%2f1074.jpg_wh860.jpg&amp;ehk=EjMY0wV6agZsqYNBKY1Y3NAi9

史上最全的js/jquery/javascript控制input输入框输入格式的代码_akuiguosheng的博客-程序员宅基地

更多技术问题解决案例请访问:IT摆渡网 -- 一个IT实时在线问答平台,解决任何IT技术难题,无需等待,立马解决!--www.itbaiduwang.comfunction ceshi()//输入字符不能少于最少值!{var aa;aa=document.akui.name.value;if(aa.length{    alert("不能少于3位");

了解如何升级和管理Amahi服务器存储_culunxun2863的博客-程序员宅基地

We have just shown you that you can upgrade your Windows Home Server for free by choosing the open source Amahi server. Now that it’s installed, here’s how to manage your drives, shares, and storage p...

UVA6692 Lucky Number【水题+序列】_海岛Blog的博客-程序员宅基地

Rock City traditionally holds an open-air non-reserved seat rock concert at the end of the summer. In the past, ticket holder would line up in a queue and enter the gate sequentially. Seating is on a ...