vue+百度地图实现搜索功能

这次整理了两个地图，这里的是百度的地图，另一个高德的地图地址https://blog.csdn.net/qq_42165062/article/details/92782197

效果图比较low.需要的自己改下样式

首先引入在index.html中引入资源链接
key在百度地图api里边生成

<script src='http://api.map.baidu.com/api?v=2.0&ak=你的key'></script>

html部分

<template><div id="all"><input type="text" id="suggestId" name="address_detail" placeholder="地址" v-model="address_detail" class="input_style"><div id="allmap"></div></div>
</template>

js部分

<script>import $ from 'jquery'export default {data(){return {address_detail: null, //详细地址center: {lng: "", lat: ""},}},methods:{address(){let that = this;$.ajax({type : "get",async:false,url : 'http://api.map.baidu.com/geocoder/v2/',dataType : "jsonp",data:{location:this.center.lat+','+this.center.lng,output:'json',pois:'1',ak:'QsVXkxxkfjL9W9A1EbsXsY80vtEFIQ6j'},success: function(json){console.log("success");console.log(json);that.address_detail = json.result.formatted_address},error: function() {alert("失败");}});},},mounted(){this.$nextTick(function () {var th = this// 创建Map实例var map = new BMap.Map("allmap");// 初始化地图,设置中心点坐标，var point = new BMap.Point(121.51713,31.079655); // 创建点坐标，联航路的经纬度坐标map.centerAndZoom(point, 15);map.enableScrollWheelZoom();//添加缩略图控件map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));//添加缩放平移控件map.addControl(new BMap.NavigationControl());//添加比例尺控件map.addControl(new BMap.ScaleControl());//添加地图类型控件//map.addControl(new BMap.MapTypeControl());var ac = new BMap.Autocomplete(    //建立一个自动完成的对象{"input": "suggestId", "location": map})var myValueac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件var _value = e.item.value;myValue = _value.province + _value.city + _value.district + _value.street + _value.business;this.address_detail = myValuesetPlace();});function setPlace() {map.clearOverlays();    //清除地图上所有覆盖物function myFun() {th.center = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果map.centerAndZoom(th.center, 18);map.addOverlay(new BMap.Marker(th.center));    //添加标注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);console.log(local)//测试输出坐标（指的是输入框最后确定地点的经纬度）map.addEventListener("click",function(e){console.log(e)//经度console.log(th.center.lng);//维度console.log(th.center.lat);th.address()})}// 初始化获取经纬度转化地址map.addEventListener("click",function(e){console.log(e.point)th.center.lng = e.point.lng;th.center.lat = e.point.lat;//经度console.log(e.point.lng);//维度console.log(e.point.lat);th.address()})})},}
</script>

css部分

<style scoped>#all{height:800px;width:800px;margin: 0 auto;}
#allmap{height:500px;width:800px;margin: 0 auto;
}
</style>

需要的同学自己更改下代码，可能有些地方写的不够完善，
参考链接：https://www.cnblogs.com/shuaifing/p/8185311.html

vue+百度地图实现搜索功能相关推荐

java安卓百度地图查找便利店_Android 百度地图POI搜索功能实例代码
在没介绍正文之前先给大家说下poi是什么意思. 由于工作的关系,经常在文件中会看到POI这三个字母的缩写,但是一直对POI的概念和含义没有很详细的去研究其背后代表的意思.今天下班之前,又看到了POI这 ...
ios百度地图地址搜索功能-在线建议查询
最近使用到了百度地图,总结一下,话不多说直接上代码: 使用的是searchBar+在线建议查询一.准备工作导入头文件#import <BaiduMapAPI_Search/BMKSearch ...
最新百度地图—POI搜索功能讲解
这几天都在学习百度地图的事例Demo,后续都会有其它功能的讲解: 对了我们这里的最新只是代指现在哦!百度地图更新的很快的,最好还是看百度api最权威. 由于上一篇已经讲解过注册文件,这里我就不写那 ...
vue 用BMap百度地图即时搜索功能
功能如下: 搜索框搜索---自动下拉---点击数据---数据显示在搜索框里---点击新增--数据显示在下方--点击删除--删除当前代码: 首先去百度开发者申请一个key 然后将key引入到项目的 i ...
vue + 百度地图地址搜索并定位
1.先上效果图 2.实现方法: <el-input v-model="searchKey" clearable placeholder="请输入搜索地址" ...
vue中调用百度地图实现搜索等功能
vue中调用百度地图实现搜索等功能在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫现在也是体会到了,学新的东西还是得看官方文档 ...
android百度地图单点定位_Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡...
一.问题描述上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡如图所示: 二. ...
HTML5接入百度地图并搜索定位
首先我们得去百度那里注册一下,拥有自己的Appkey,连接:http://lbsyun.baidu.com/ 也可以使用别人的,当然最好还是自己去注册比较好. 第二步,在你自己的网页中引入: 下面直接 ...
百度地图——poi搜索
定义 POI(Point of Interest),中文可以翻译为"兴趣点".在地理信息系统中,一个POI可以是一栋房子.一个商铺.一个邮筒.一个公交站等. 百度地图SDK提供三种 ...

vue+百度地图实现搜索功能

vue+百度地图实现搜索功能相关推荐

最新文章

热门文章