<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 中根据地址名称获取实际经纬度方法的更多相关文章

  1. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  2. js读取cookie 根据cookie名称获取值的方法

    //方法1 //存在问题:如果cookie中存在 aaaname=aa;name=bb 获取name的值就会出现错误function getCookie(c_name){ if (document.c ...

  3. 【STM32】MDK中寄存器地址名称映射分析

    对于MCU,一切底层配置,最终都是在配置寄存器 51单片机访问地址 51单片机经常会引用一个reg51.h的头文件.下面看看它是怎么把名字和寄存器联系在一起的: 1 sfr p0=0x80; 2 p0 ...

  4. android中的坐标系以及获取坐标的方法

    android中有两种坐标系,分别称之为Android坐标系和视图坐标系.而对应的也有一些相关的方法可以获取坐标系中的 坐标值.只有搞清楚这些区别,才能在实现的时候不至于出错或者得不到你想要的效果. ...

  5. Vue源码之----为什么Vue中Array的pop,push等方法可以reactive,而Array[0]='a'这样的方法不会reactive?

    这就要从reactive开始讲起了,粗略的说,js的操作能引起页面上显示的改变,是因为该操作引起了组件的重新渲染,渲染会生成新的虚拟节点,新节点和旧节点会对比,操作浏览器的node进行改变. vue实 ...

  6. 解决Vue中"This dependency was not found"的方法

    今天在初始化项目中,出现了一个奇怪的情况:明明路径是对的,但是编译的时候,一直报"This dependency was not found"的错. 代码如下: import Vu ...

  7. vue 中数据没有同步渲染的解决方法

    今天在做一个页面,遇到一个数据渲染不同步的问题,如下: 代码如下:原理:点击时,对应的banklist 的选项选项变为 true 选中状态 html: <div class="PayO ...

  8. 在Vue中通过自定义指令获取元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Eleme ...

  9. vue 中结合百度地图获取当前城市

    首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script ...

随机推荐

  1. 字符串反转reverse

    我们有一串字符串,比如: DECLARE @Source VARCHAR(MAX)= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 现想把它反转显示: ZYXWVUTSRQPONMLKJI ...

  2. httpd.conf------Apache主站点配置

    Apache主站点配置 Apache的配置由httpd.conf文件配置,因此下面的配置指令都是在httpd.conf文件中修改. Apache主站点基本配置:ServerRoot “/mnt/sof ...

  3. lca最近公共祖先(st表/倍增)

    大体思路 1.求出每个元素在树中的深度 2.用st表预处理的方法处理出f[i][j],f[i][j]表示元素i上方第2^j行对应的祖先是谁 3.将较深的点向上挪,直到两结点的深度相同 4.深度相同后, ...

  4. NOIp知识集合 By cellur925

    基本算法 快速幂 ll ksm(ll a,ll b) { ll ans=; while(b) { ) ans=ans*a%p; b>>=; a=a*a%p; } return ans; } ...

  5. 【T-BABY 夜谈大数据】基于内容的推荐算法

    这个系列主要也是自己最近在研究大数据方向,所以边研究.开发也边整理相关的资料.网上的资料经常是碎片式的,如果要完整的看完可能需要同时看好几篇文章,所以我希望有兴趣的人能够更轻松和快速地学习相关的知识. ...

  6. HDU-3499:Flight(SPFA+dp)

    Recently, Shua Shua had a big quarrel with his GF. He is so upset that he decides to take a trip to ...

  7. 紫书140例题6-2 铁轨&&UVa514

    某城市有一个火车站,铁轨铺设如图6-1所示.有n节车厢从A方向驶入车站,按进站顺序编号为1~n.你的任务是判断是否能让它们按照某种特定的顺序进入B方向的铁轨,并驶出车站.例如,出栈顺序(5 4 1 2 ...

  8. Consul实现服务治理

    .NET Core微服务之基于Consul实现服务治理 https://www.cnblogs.com/edisonchou/p/9124985.html 一.Consul基础介绍 Consul是Ha ...

  9. linux批量替换指定文件夹中所有文件的指定内容

    命令:sed -i "s#https#http#g" `grep http -rl VEROMODA` 功能:用来替换当前目录VEROMODA文件夹及子文件夹中所有文件中的http ...

  10. HDU 5875 H - Function 用单调栈水过了

    http://acm.hdu.edu.cn/showproblem.php?pid=5875 单调栈,预处理to[i]表示第一个比a[i]小的数字,一直跳就可以. 这题是数据水而已. 这里学习下单调栈 ...