vue 中根据地址名称获取实际经纬度方法
<div id="container"
class="map"
style="margin-top:30px; width: 1200px;height:300px;border: 1px solid #f4d3ba;"></div>
<div id="containers" style="display: none"></div>
<script>
export default {
validate ({ params }) {
return /^\d+$/.test(params.id)
},
head () {
return {
script: [
{src: 'http://webapi.amap.com/maps?v=1.3&key=6e7239cd1f1aaf595bca3753a67986f8'},
{src: 'http://libs.baidu.com/jquery/2.1.4/jquery.min.js'}
// {src: 'https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js'},
// {src: 'https://webapi.amap.com/maps?v=1.4.14&key=6e7239cd1f1aaf595bca3753a67986f8&plugin=AMap.Geocoder'},
]
}
},
methods: {
getLocation () {
let vthis = this
$.ajax({
url: 'https://restapi.amap.com/v3/geocode/geo',
type: 'get',
dataType: 'jsonp',
data: {
key: '6e7239cd1f1aaf595bca3753a67986f8',
address: this.companyInfo.registeredAddress
},
success: function (data) {
vthis.initAMap(data.geocodes[0].location)
}
})
},
initAMap (data) {
let map = new AMap.Map('container', {
resizeEnable: true,
zoom: 20,
center: data.split(',')
})
AMap.plugin('AMap.Geocoder', function () {
let marker = new AMap.Marker({
map: map,
bubble: true
})
})
}
},
mounted () {
this.getLocation()
}
}
</script>
vue 中根据地址名称获取实际经纬度方法的更多相关文章
- 浅谈Vue中计算属性(computed)和方法(methods)的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- js读取cookie 根据cookie名称获取值的方法
//方法1 //存在问题:如果cookie中存在 aaaname=aa;name=bb 获取name的值就会出现错误function getCookie(c_name){ if (document.c ...
- 【STM32】MDK中寄存器地址名称映射分析
对于MCU,一切底层配置,最终都是在配置寄存器 51单片机访问地址 51单片机经常会引用一个reg51.h的头文件.下面看看它是怎么把名字和寄存器联系在一起的: 1 sfr p0=0x80; 2 p0 ...
- android中的坐标系以及获取坐标的方法
android中有两种坐标系,分别称之为Android坐标系和视图坐标系.而对应的也有一些相关的方法可以获取坐标系中的 坐标值.只有搞清楚这些区别,才能在实现的时候不至于出错或者得不到你想要的效果. ...
- Vue源码之----为什么Vue中Array的pop,push等方法可以reactive,而Array[0]='a'这样的方法不会reactive?
这就要从reactive开始讲起了,粗略的说,js的操作能引起页面上显示的改变,是因为该操作引起了组件的重新渲染,渲染会生成新的虚拟节点,新节点和旧节点会对比,操作浏览器的node进行改变. vue实 ...
- 解决Vue中"This dependency was not found"的方法
今天在初始化项目中,出现了一个奇怪的情况:明明路径是对的,但是编译的时候,一直报"This dependency was not found"的错. 代码如下: import Vu ...
- vue 中数据没有同步渲染的解决方法
今天在做一个页面,遇到一个数据渲染不同步的问题,如下: 代码如下:原理:点击时,对应的banklist 的选项选项变为 true 选中状态 html: <div class="PayO ...
- 在Vue中通过自定义指令获取元素
vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Eleme ...
- vue 中结合百度地图获取当前城市
首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script ...
随机推荐
- .Net HttpWebRequest 爬虫核心爬取
1 爬虫,爬虫攻防 2 下载html 3 xpath解析html,获取数据和深度抓取(和正则匹配) 4 多线程抓取 熟悉http协议 提供两个方法Post和Get public static stri ...
- Linux shell 单引号和双引号
在编写shell脚本的时候经常会用到引号,有些时候却老是忘记单引号和双引号之间的区别, 所以就整理一下供以后脑子不好使了的时候前来复习一下.首先说下他们的共同点: 好像就只有 一个,就是它们都可以用来 ...
- IDEA如何找到接口的实现类
如何找到接口的实现类 (IDEA))在ApplicationContext上右击 Diagrams ->show diagram 可以看到继承关系: 在ApplicationContext上右击 ...
- hdu1394(枚举/树状数组/线段树单点更新&区间求和)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1394 题意:给出一个循环数组,求其逆序对最少为多少: 思路:对于逆序对: 交换两个相邻数,逆序数 +1 ...
- SPA单页应用前后分离微信授权
项目基于微信公众号开发,业务完全依赖微信授权,也就是用户进入页面已经完成授权获取到用户的OpenId. 需要有一个授权中间页:author.vue 基本实现思路: 无论使用哪个url进入页面都会先触发 ...
- MyBatis日志实现
maven项目resources文件夹下log4j.properties 其作用是输出controller包下参与Mybatis的类的SQL语句输出.如果包名不一样,请根据自己的项目情况调整. # G ...
- mySQL多表查询与事务
一.范式 1. 什么是范式 1.1 什么是范式 范式:设置一个科学的.规范的数据库,需要满足的一些规则 1.2 有哪些范式 共有:6大范式 第1范式:1NF 满足最基本的要求 第2范式:2NF 在1N ...
- window.location.origin兼容问题
if (!window.location.origin) { window.location.origin = window.location.protocol + "//" + ...
- jsp中c标签的使用
jsp中c标签的使用 核心标签库 它是JSTL中的核心库,为日常任务提供通用支持,如显示和设置变量.重复使用一组项目.测试条件和其他操作(如导入和重定向Web内容).Core标签按功能可分为4种类型: ...
- 线程池(5)Executors.newScheduledThreadPool
例子1(scheduleAtFixedRate):延迟2秒后,每隔3秒执行1次 ScheduledExecutorService es = Executors.newScheduledThreadPo ...