<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. Kolla多节点环境安装OVN

    安装OVN组件 控制节点 ### 安装ovn-northd # wget https://copr.fedorainfracloud.org/coprs/leifmadsen/ovs-master/r ...

  2. [转] 无监督特征学习——Unsupervised feature learning and deep learning

    from:http://blog.csdn.net/abcjennifer/article/details/7804962 无监督学习近年来很热,先后应用于computer vision, audio ...

  3. 微调Inception V3网络-对Satellite分类

    目录 1. 流程概述 2. 准备数据集 2.1 Satellite数据集介绍 3. Inception V3网络 4. 训练 4.1 基于Keras微调Inception V3网络 4.2 Keras ...

  4. webpack 打包和手动创建一个vue的项目

    首先我们为啥要用webpack,为啥不用其他的打包的工具. 先听我捋捋, Webpack有人也称之为 模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片. ...

  5. MySQL server has gone away和Maximum execution time of 120 seconds exceeded

    今天在写采集时碰到两个问题1.MySQL server has gone away2.Maximum execution time of 120 seconds exceeded 采集程序写好运行大概 ...

  6. [題解](水/數學)luogu_P1147連續自然數和

    尺取法a掉 然而數學解法為 等差數列求和公式: sum(L,R)=(L+R)(R-L+1)/2=M 即(L+R)(R-L+1)=2M 可以把2M分解成两个数之积,假设分成了两个数K1,K2,且K1&l ...

  7. SSRS-lookupSet-DataSet-分组查询

    SSRS-lookupSet-DataSet-分组查询 来源:http://www.cnblogs.com/biwork/p/3621885.html 目录:http://www.cnblogs.co ...

  8. 使用Spring Security OAuth2进行简单的单点登录

    1.概述 在本教程中,我们将讨论如何使用Spring Security OAuth和Spring Boot实现SSO - 单点登录. 我们将使用三个单独的应用程序: 授权服务器 - 这是中央身份验证机 ...

  9. javascript 关于hashtable

    javascript 实现HashTable(哈希表) 一.javascript哈希表简介 javascript里面是没有哈希表的,一直在java,C#中有时候用到了这一种数据结构,javascrip ...

  10. P3290 寻找第K大数

    描述 寻找第K大数 N个小朋友在一起做游戏.每个小朋友在自己的硬纸板上写一个数,然后同时举起来.接着,小y老师提一个问题,看哪个小朋友先抢答出来.问题是:在这N个数中,第K大的是哪个数?请你编程完成. ...