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 ...
随机推荐
- Kolla多节点环境安装OVN
安装OVN组件 控制节点 ### 安装ovn-northd # wget https://copr.fedorainfracloud.org/coprs/leifmadsen/ovs-master/r ...
- [转] 无监督特征学习——Unsupervised feature learning and deep learning
from:http://blog.csdn.net/abcjennifer/article/details/7804962 无监督学习近年来很热,先后应用于computer vision, audio ...
- 微调Inception V3网络-对Satellite分类
目录 1. 流程概述 2. 准备数据集 2.1 Satellite数据集介绍 3. Inception V3网络 4. 训练 4.1 基于Keras微调Inception V3网络 4.2 Keras ...
- webpack 打包和手动创建一个vue的项目
首先我们为啥要用webpack,为啥不用其他的打包的工具. 先听我捋捋, Webpack有人也称之为 模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片. ...
- 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 采集程序写好运行大概 ...
- [題解](水/數學)luogu_P1147連續自然數和
尺取法a掉 然而數學解法為 等差數列求和公式: sum(L,R)=(L+R)(R-L+1)/2=M 即(L+R)(R-L+1)=2M 可以把2M分解成两个数之积,假设分成了两个数K1,K2,且K1&l ...
- SSRS-lookupSet-DataSet-分组查询
SSRS-lookupSet-DataSet-分组查询 来源:http://www.cnblogs.com/biwork/p/3621885.html 目录:http://www.cnblogs.co ...
- 使用Spring Security OAuth2进行简单的单点登录
1.概述 在本教程中,我们将讨论如何使用Spring Security OAuth和Spring Boot实现SSO - 单点登录. 我们将使用三个单独的应用程序: 授权服务器 - 这是中央身份验证机 ...
- javascript 关于hashtable
javascript 实现HashTable(哈希表) 一.javascript哈希表简介 javascript里面是没有哈希表的,一直在java,C#中有时候用到了这一种数据结构,javascrip ...
- P3290 寻找第K大数
描述 寻找第K大数 N个小朋友在一起做游戏.每个小朋友在自己的硬纸板上写一个数,然后同时举起来.接着,小y老师提一个问题,看哪个小朋友先抢答出来.问题是:在这N个数中,第K大的是哪个数?请你编程完成. ...