vue引入地图，实现搜索添加地图位置点，点击地图获取位置信息

先看效果

这里引入的是百度地图，根据下图操作即可（选择的是浏览器端,也可以用3.0或者2.0，这里用到的是GL）

获取ak后把这段代码放在index里

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=放在这里"></script>

地图显示位置

initMap() {// console.log("初始化地图");map = new BMapGL.Map("mapcontainer");   // 这里的值是上面图片div的idwindow.bmap = map;map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.addEventListener("click", function(e) {// console.log("点击位置经纬度：" + e.latlng.lng + "," + e.latlng.lat);// 用到的是GL 所以这里是e.latlng.lng，如果是3.0或者2.0则是e.pointmap.clearOverlays();   // 清除地图所有标记点map.centerAndZoom(new BMapGL.Point(e.latlng.lng, e.latlng.lat), 15);
// centerAndZoom 第一个参数根据点击的地方重新确认地图中心点，第二个参数是地图缩放级别，最大为19，最小为0var marker1 = new BMapGL.Marker(// Marker是标注表示地图上的点，可自定义标注的图标。new BMapGL.Point(e.latlng.lng, e.latlng.lat));map.addOverlay(marker1);that.rowInfo.xaxis = e.latlng.lng;  // 这里是储存两个地点信息that.rowInfo.yaxis = e.latlng.lat;// 创建地理编码实例var myGeo = new BMapGL.Geocoder();// 根据坐标得到地址描述myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat),function(result) {if (result) {that.rowInfo.remark = result.address;  // 获取点击的地点名称，并赋值给左侧的input}});});},

搜索框

<el-col :span="24" :offset="0"><el-form-item label="详细地址" prop="remark"><el-autocompletev-model="rowInfo.remark":fetch-suggestions="querySearch"placeholder="请输入关键字选择详细地址"@blur='valueChange'@select="handleSelect"name="remark"style="width: 85%; ":trigger-on-focus="false":highlight-first-item='true'ref="elautocomplete"><template slot-scope="{ item }"><div v-if="item" class="map-name">{{ item && item.value ? item.value : "" }}</div><span v-if="item" class="map-addr">{{item && item.address ? item.address : ""}}</span></template></el-autocomplete></el-form-item></el-col>

储存输入信息

搜索框方法

querySearch(queryString, cb) {//输入后回调查询百度地图地址if (!queryString) {return;}var local = null;var options = {onSearchComplete: function(results) {// 判断状态是否正确if (local.getStatus() == BMAP_STATUS_SUCCESS) {var s = [];for (var i = 0; i < results.getCurrentNumPois(); i++) {s.push({value: results.getPoi(i).title,address: results.getPoi(i).address,point: results.getPoi(i).point});}cb(s);}}};local = new BMapGL.LocalSearch(map, options);local.search(queryString);this.$refs['elautocomplete'].suggestions=[];},handleSelect(item) {//处理地图检索选择let lat = item.point.lat;let lng = item.point.lng;map.clearOverlays();map.centerAndZoom(new BMapGL.Point(lng, lat), 15);var marker1 = new BMapGL.Marker(new BMapGL.Point(lng, lat));map.addOverlay(marker1);this.rowInfo.xaxis = lng;this.rowInfo.yaxis = lat;},valueChange() {// 当搜索框内容改变但不选择下拉内容时 清除输入的内容this.rowInfo.remark=''},

vue引入地图，实现搜索添加地图位置点，点击地图获取位置信息相关推荐

vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
如何通过echarts绘制北京市地图并可以添加标记并可点击
首先获取城市地图所对应的json文件通过这个网站可以获取到城市地图所对应的json echarts 中使用的是地图的js文件需要找到北京地图的js文件下载各个城市的js文件绘制出地图在地图上 ...
android 获取位置数据库,尝试从webview获取位置时，Android“SQLite数据库无法从/CachedGeoposition.db加载”错误...
我正在创建一个使用webkit和chrome客户端的android应用程序.我希望能够在网页请求时获取当前位置.我设置的网页适用于普通浏览器就好了.然而,当我尝试访问该网页WebKit中,我不断收到此 ...
高德sdk定位当前位置_单次定位-获取位置-开发指南-iOS 定位SDK | 高德地图API
iOS定位SDK提供的单次定位方法基于苹果定位核心,苹果定位核心会在设备移动时连续返回定位结果,高德在此基础上封装了单次定位.当设备可以正常联网时,还可以返回该定位点的对应的中国境内位置信息(包括:省 ...
vue引入的el-tree前添加图标
根据有没有子节点来显示前面是文件夹还是文件的图标 (因为遇到了就记录了下来) 如果有子节点(children),就在前面加上一个文件夹的图标(片),如果没有子节点,就显示的是文件的图标(片) 只 ...
js 百度地图选择某个位置（选点），获取经纬度信息。
效果图: ak获取地址,百度开放平台: https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 代码: <!DOCTYPE htm ...
vue 点击div 获取位置_vue接入腾讯位置服务之点击事件
1.[调用展示] //先在vue的index.html里面引入腾讯地图包 //.vue export default{ mounted() { this.init(); }, methods:{ in ...
vue 点击div 获取位置_Vue中组件之间8种通信方式，值得收藏
之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么 ...
vue 点击div 获取位置_vue 点击元素滚动到指定位置
{{item}} {{item}} data() {return{ navgator: ['列表A','列表B','列表C','列表D', ], navgatorIndex:0, listBox: [ ...
Python 位置名称通过高德API获取行政区划信息ByMySQL
先上代码 #!/usr/bin/env python3 # -*- coding: utf-8 -*- # coding=utf-8 import pymysql import requestsdef ...

vue引入地图，实现搜索添加地图位置点，点击地图获取位置信息

地图显示位置

搜索框

储存输入信息

搜索框方法

vue引入地图，实现搜索添加地图位置点，点击地图获取位置信息相关推荐

最新文章

热门文章