vue项目中使用高德地图(根据坐标定位点)
2024-09-26 06:55:02
前言
项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码
正文
<script>
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 = "暂无位置";
}
});
})
},
}
</script>
总结
以上就是本文的全部内容了,希望对大家有所帮助,若是有疑问或是对文中内容有争议,请评论留言!
最新文章
- InstallShield2013 error 6109
- [AngularJS] AngularJS系列(6) 中级篇之ngResource
- 《Ext JS模板与组件基本知识框架图----模板》
- jQueryMobile引入文件后样式无法正常显示
- C# 多线程限制方法调用(monitor)
- ASP.NET MVC 监控诊断、本地化和缓存
- 如何在博客中插入jsfiddle的代码
- java 中的几种 ";通用方法“
- C++ const&;的一个特性
- 单片机脚本语言-移植lua到stm32-MDK
- codeforces 13E . Holes 分块
- python collections.Counter笔记
- Selenium WebDriver多层表单切换
- 新概念英语(1-1)Excuse me!
- confluence6.x安装
- Codeforces Round #486 (Div. 3)-B. Substrings Sort
- linux下jenkins的时区设置问题
- 登录Linux服务器显示IP和自定义备注
- iOS Xcode 10: Multiple commands produce
- 访问服务器时一直在转圈,等待localhost响应
热门文章
- LTE系统时延及降低空口时延的4种方案
- Vue最常用的组件通讯有三种:父->;子组件通讯、子->;父组件通讯,兄弟组件通讯.(template用的pug模板语法)
- 【PowerOJ1742&;网络流24题】试题库问题(最大流)
- [CSP-S模拟测试]:计数(DP+记忆化搜索)
- [BZOJ3781]:小B的询问(离线莫队算法)
- 使用Git上传本地项目到http://git.oschina.net
- NOIP2012 洛谷P1083 借教室
- mysql语句练习50题
- DSP处理器和ARM处理器的区别以及各自应用在那些领域
- nginx + tomcat + memcached 做负载均衡及session同步