vue 创建图片坐标点_vue项目中使用高德地图（根据坐标定位点）

前言

项目中需要根据坐标定位，将自己的实现过程写下来，废话不多说，上代码

正文

var map,marker;

export default {

data(){

return{

arriveCoor:[108.947025,34.2613255],//坐标点

arrive:"",//位置信息

}

},

mounted() {

mapDraw(this.arriveCoor),

mapCoor(this.arriveCoor)

},

methods:{

mapDraw(arriveCoor){

map = new AMap.Map('map-location', { //map-location是嵌地图div的id

resizeEnable: true, //是否监控地图容器尺寸变化

zoom:16, //初始化地图层级

center: arriveCoor //初始化地图中心点

});

// 定位点

this.addMarker(arriveCoor);

},

// 实例化点标记

addMarker(arriveCoor) {

var _this = this;

marker = new AMap.Marker({

icon: "", //图片ip

imageSize: "20px",

position: arriveCoor,

offset: new AMap.Pixel(-13, -30),

// 设置是否可以拖拽

draggable: true,

cursor: 'move',

// 设置拖拽效果

raiseOnDrag: true

});

marker.setMap(map);

},

// 查询坐标

mapCoor(lnglatXY){

var _this = this;

AMap.service('AMap.Geocoder',function() {//回调函数

var geocoder = new AMap.Geocoder({});

geocoder.getAddress(lnglatXY, function (status, result) {

if (status === 'complete' && result.info === 'OK') {

//获得了有效的地址信息:

_this.arrive = result.regeocode.formattedAddress;

else {

_this.arrive = "暂无位置";

}

});

})

},

}

总结

以上就是本文的全部内容了，希望对大家有所帮助，若是有疑问或是对文中内容有争议，请评论留言！

vue项目中使用百度地图的方法

1.在百度地图申请密钥: http://lbsyun.baidu.com/  将

强制转换的条件: 1.当所声明的类型不能满足所符值的变量时,需要转换声明的类型,以便能够存储变量. 例如:short存储的最大值为32767,但是所要符值大于32767时,short类型不符合,需要转 ...

[FPGA] 2、新建并运行一个工程

上一篇将开发板的情况大致介绍了一下,这次将一步一步展示如何新建.调试并下载运行一个点亮LED的工程. 1)打开Quartus新建工程: 2)填写规则大致如下: 3)选择我们芯片的类型: 4)点击fil ...

Binary Tree Level Order Traversal II 解题思路

思路: 与Binary Tree Level Order Traversal I 几乎一样.只是最后将结果存放在栈里,然后在栈里再传给向量即可. 再次总结思路: 两个queue,先把第一个放进q1,循 ...

常用的wsdl地址

天气预报Web Service,数据来源于中国气象局 Endpoint Disco WSDL IP地址来源搜索Web Service(是目前最完整的IP地址数据) Endpoint Disco WSD ...

服务治理利器Hystrix-理论篇

引言 现在的大中型应用,很多都在朝着服务化.分布式的方向发展.这有多方面的考虑,比如说,方便治理.便于扩展.服务隔离等等.不过在带来如此多利好的同时,不可避免的也会带来麻烦,比如系统架构复杂.服务依赖 ...

TCP/IP笔记(1)

TCP/IP 背景和介绍 上世纪 70 年代,随着计算机技术的发展,计算机使用者意识到:要想发挥计算机更大的作用,就要将世界各地的计算机连接起来.但是简单的连接是远远不够的,因为计算机之间无法沟通.因 ...

centos7升级Python2.x到3.x

CentOS 7 中默认安装了 Python,版本比较低(2.7.5),为了使用新版 3.x,需要对旧版本进行升级.由于很多基本的命令.软件包都依赖旧版本,比如:yum.所以,在更新 Python 时 ...

Activiti启动某个流程失败，页面报500

现象:Activiti启动某个流程失败,页面报500,错误日志如下. 2017-06-19 10:50:09 [org.activiti.engine.impl.interceptor.Command ...

CentOS安装pycharm

1.官网下载包 2.Linux下解压 3.进入bin目录 4.赋权:chmod +x pycharm.sh 5.安装:./pycharm.sh 6.添加链接:ln -s /home/pycharm/p ...