需求

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

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

代码

在dom新建div渲染地图

<el-form-item label="店铺地址" prop="address">
 <el-input v-model="fristForm.address"></el-input>
 <el-input
 class="long-lat"
 v-model="fristForm.longitude"
 placeholder="经度"
 ></el-input>
 <el-input
 class="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>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 什么是Monorepo，如何构建一个简单的Monorepo项目

  这篇文章主要为大家介绍了JS前端架构pnpm构建Monorepo方式的管理demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• JS中数组Array方法常用的有哪些，功能是什么

  JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象,下面这篇文章主要给大家介绍了关于JavaScript数组Array的一些常用方法,需要的朋友可以参考下

• vue3中watcheffect的作用是什么？怎样使用？

  这篇文章我们来简单的了解一下vue3中watcheffect的用途与使用，首先watch和watchEffect都是监听器，但是watch和watchEffect在写法和使用上都有一定的区别，因为为了便于大家理解，下面小编就给大家来讲讲。

• Vue中怎么制作简单的图片上传与显示的功能

  这篇文章主要介绍了Vue+Vant 图片上传加显示的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

• React中useRef的用法有什么？怎样实现？

  React中useRef的用法有什么？如果有使用过React的朋友，应该对ref会比较熟悉的点，ref可以用来获取组件实例对象或者是DOM对象，而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。那么具体怎样用呢？下面我们就一起来了解看看。