vue 里面引入高德地图
效果图:
实现:
一:引入 高德,web-sdk (两种方式)
1:在html 中引入(我用的这一种)
上述就是实现代码,可打开下面粘贴
let map = new AMap.Map('container', {
center: [this.tableData[0].longitude, this.tableData[0].latitude],
resizeEnable: true,
zoom: 30
});
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.Scale())
});
//画一个车的位置
let marker = new AMap.Marker({
//icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
icon:require("../assets/che.png"),
position: [this.tableData[0].longitude, this.tableData[0].latitude],
width:"40px",
height:"40px",
});
marker.setMap(map);
//画附近所有站点的位置
console.log(res.data.data[1].longitude,res.data.data[1].latitude)
for (var index = 0; index < res.data.data.length; index++) {
let marker = new AMap.Marker({
//icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
icon:require("../assets/p.png"),
position:[res.data.data[index].longitude,res.data.data[index].latitude],
});
marker.setMap(map);
}
还有个规划路线的部分:
var walking = new AMap.Walking({
map: map,
panel: "panel"
});
walking.search([this.tableData[0].longitude, this.tableData[0].latitude], [res.data.data[0].longitude,res.data.data[0].latitude]);
vue 里面引入高德地图的更多相关文章
- vue-cli2.X中引入高德地图,将其设为全局对象
平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可,在vue-cli 2.X构建的项目中,需要用如下方式引入高德地图: 首先在高德地图开放平台中注册开发者账号并获取key ...
- vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. &l ...
- vue+vant ui+高德地图的选址组件
首先在index.html引入高德地图的js <script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key" ...
- VUE 2.0 引入高德地图,自行封装组件
1. 高德地图官网 申请帐号, 申请相应(JavaScript API)的 Key 2. 在项目中引入, 这里和其他的引入不同的是 直接在 index.html, 不是在 main.js 引入, 博主 ...
- 在vue中使用高德地图开发,以及AMap的引入?
百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- 在vue中使用高德地图vue-amap
1.安装 vue-amap我安装指定版本0.5.10的版本 npm i --save vue-amap@0.5.10 2.main.js中的配置 key申请地址教程:https://lbs.amap. ...
- VUE组件 之 高德地图地址选择
注:本文基于上一篇文章[ Vue-Cli 3.0 中配置高德地图] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图 二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2 ...
- vue.js 使用高德地图
1.获取key值 注册成为高德开发者需要分三步: 第一步,注册高德开发者: 第二步,去控制台创建应用: 第三步,获取Key 2.修改配置文件 webpack.base.conf.js externa ...
随机推荐
- uml类图和er图中主外键的表示区别
在er图也就是数据库中,无论是mysql/oracle都是从表引用主表的pk作为外键. 而在uml类图表示法中,他们的顺序则刚好相反,从主对象导向到子对象,如下: 主体是资金借款方,征信信息和资金借款 ...
- Codeforces Round 500 (Div 2) Solution
从这里开始 题目地址 瞎扯 Problem A Piles With Stones Problem B And Problem C Photo of The Sky Problem D Chemica ...
- 使用Jenkins构建、部署spring boot项目
一.环境搭建 本次实验的环境为Ubuntu 16.04,Jenkins 2.8.3 1.安装ssh sudo apt-get update # 更新软件源 sudo apt-get install o ...
- QSetting
.初始化,判断是否存在ini文件,如果不存在则新建 void iniConfig() { QFileInfo fileInfo(".\\config.ini"); if (!fil ...
- 前端 --- 3 css 属性
一. 标签嵌套规则 块级标签能够嵌套某些块级标签和内敛标签(行内标签) 内敛标签不能嵌套块级标签,只能嵌套内敛标签 二. 属性 1.宽和高 (块级标签能够设置高度和宽度 内敛标签不能设置,设置了没 ...
- Spring 学习——Spring JSR注解——@Resoure、@PostConstruct、@PreDestroy、@Inject、@Named
JSR 定义:JSR是Java Specification Requests的缩写,意思是Java 规范提案.是指向JCP(Java Community Process)提出新增一个标准化技术规范的正 ...
- error和exception有什么区别?
Error(错误)表示系统级的错误和程序不必处理的异常,是java运行环境中的内部错误或者硬件问题.比如:内存资源不足等.对于这种错误,程序基本无能为力,除了退出运行外别无选择,它是由Java虚拟机抛 ...
- Django框架 (一) 虚拟环境配置及简单使用
虚拟环境 什么是虚拟环境 对真实的python解释器的一个拷贝版本 是事实有效的,可以独立存在运行解释python代码 可以在计算机上拷贝多个虚拟环境 为什么要使用虚拟环境 保证真实环境的纯净性 框架 ...
- cmd copy命令 文件复制【转】
本文转载自:https://www.jb51.net/article/18981.htm copy,中文含义为“复制”,一个很容易见名知意的命令,它的作用是复制文件,用法十分简单:copy 源文件 目 ...
- 数论+矩阵快速幂|斐波那契|2014年蓝桥杯A组9-fishers
标题:斐波那契 斐波那契数列大家都非常熟悉.它的定义是: f(x) = 1 .... (x=1,2) f(x) = f(x-1) + f(x-2) .... (x>2) 对于给定的整数 n 和 ...