vue+腾讯地图实现坐标拾取器功能

需求

1、搜索具体地址，自动填写经纬度，并在地图上标记

2、点击地图上一点，可重新填写经纬度并且标记

代码

在dom新建div渲染地图

<el-form-item label="店铺地址" prop="address"><el-input v-model="fristForm.address"></el-input><el-inputclass="long-lat"v-model="fristForm.longitude"placeholder="经度"></el-input><el-inputclass="long-lat"v-model="fristForm.latitude"placeholder="纬度"></el-input><el-button size="mini" type="primary" @click="searchKeyword">搜索</el-button>
</el-form-item>
<span class="changeAddress">点击地图更换分店定位地址</span>
<!-- 渲染地图的div容器 -->
<div id="container" class="mapbox"></div>

js定义地图变量并设置需求

var searchService,geocoder,map,markersArray = [];
<script>
export default {mounted() {this.init();},methods:{init() {var that = this;var center = new qq.maps.LatLng(39.916527, 116.397128);var map = new qq.maps.Map(document.getElementById("container"), {center: center,zoom: 13});var latlngBounds = new qq.maps.LatLngBounds();qq.maps.event.addListener(map, "click", function(event) {console.log(event);that.fristForm.longitude = event.latLng.getLng(); // 经度that.fristForm.latitude = event.latLng.getLat(); // 纬度if (markersArray) {for (let i in markersArray) {markersArray[i].setMap(null);}}var marker = new qq.maps.Marker({map: map,position: event.latLng});markersArray.push(marker);});geocoder = new qq.maps.Geocoder({complete: function(result) {console.log(result);that.fristForm.longitude = result.detail.location.lng;that.fristForm.latitude = result.detail.location.lat;map.setCenter(result.detail.location);var marker = new qq.maps.Marker({map: map,position: result.detail.location});markersArray.push(marker);}});},},// 搜索地址searchKeyword() {var keyword = this.fristForm.address;this.clearOverlays(markersArray);//根据输入的城市设置搜索范围// searchService.setLocation("北京");//根据输入的关键字在搜索范围内检索if (keyword) {// searchService.search(keyword);geocoder.getLocation(keyword);} else {alert("请输入地址");}},
}
</script>

文档参考

以上代码使用的是jsapi功能，目前对应功能已升级JavaScript API GL，地址解析功能可直接调取接口使用，欢迎大家体验！

地址解析（地址转坐标）

JavaScript API GL参考手册

作者：houqq

链接：https://segmentfault.com/a/1190000022211912

来源：segmentfault

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

vue+腾讯地图实现坐标拾取器功能相关推荐

腾讯地图坐标拾取器，js转WGS84保存到后台
效果如上: 有个项目需要大量的地图坐标(wgs84),想到了用地图点击保存的方式来实现,html+js就可以搞定. 首先要申请一个腾讯地图的key 剩下的就是看文档,写js,写页面了. <!DO ...
使用vue+腾讯地图API GL实现地图选房的功能
使用vue+腾讯地图API GL实现地图选房的功能背景介绍公司最近想做一个地图选房的功能,在网上找了很久也没有找到这方面的demo,就只好硬着头皮自己写一个地图选房的功能腾讯地图的官方文档.首先 ...
腾讯地图发送定位-打开定位功能
用到的是腾讯地图API,主要的功能: 1.选择地址发送(地图选址组件 https://lbs.qq.com/tool/component-picker.html) 2.实时地址静态图(https:// ...
腾讯地图拾取坐标html,腾讯地图Api 实现拾取坐标功能示例
一.注册Api账号,引用js库二.编写坐标拾取js代码和html代码 //按钮定义 *坐标: 经度纬度点击坐标拾取 //弹出框定义 × 拖动位置标记设置坐标确定 js代码示例 //选择坐标处理 ...
腾讯地图Api 实现拾取坐标功能示例
一.注册Api账号,引用js库 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp& ...
微信小程序map 地图引入配置+腾讯地图地址坐标解析
最终效果一.要实现的功能展示地图. 参考map组件在地图上展示多个店铺. marker标记点用于在地图上显示标记的位置. 点击店铺放大图标,展示选择的店铺信息. 更改选择店铺的标记尺寸大小. 在 ...
vue 腾讯地图展示用户定位附近的门店
前言本需求主要是获取用户当前定位,并将定位返回的经纬度坐标请求到后端接口,后端返回距离用户最近的门店,并且前端把门店标记在地图上. 关于坐标系我们通常用经纬度来表示一个地理位置,但是由于一些原因, ...
h5如何唤起地图App（vue+腾讯地图）
一.创建腾讯地图的key 地址:腾讯位置服务 - 立足生态,连接未来二.腾讯地图文档 url接口:URI API(地图调起) | 腾讯位置服务注:特别注意灰色部位,弄错了就多整好几个小时(瞎几把整 ...
vue 腾讯地图点聚合点标注添加信息窗口
<template><div id="container"></div> </template> <script> im ...
腾讯地图仿微信发送位置功能
以下内容转载自面糊的文章<模仿微信发送位置功能> 作者:面糊链接:https://www.jianshu.com/p/47b3ada2e36d 来源:简书著作权归作者所有.商业转载请联 ...

vue+腾讯地图实现坐标拾取器功能

需求

代码

文档参考

vue+腾讯地图实现坐标拾取器功能相关推荐

最新文章

热门文章

vue+腾讯地图 实现坐标拾取器功能

需求

代码

文档参考

vue+腾讯地图 实现坐标拾取器功能相关推荐

最新文章

热门文章

vue+腾讯地图实现坐标拾取器功能

vue+腾讯地图实现坐标拾取器功能相关推荐