在我们平常写房地产相关项目的时候经常会用到百度地图,因为这一块客户会考虑到房源周围的配套或者地铁线路所以在这类项目中就不可以避免的会用到百度地图,当然这只是其中一种,其他地图工具也可以,因为我这个项目恰好要求用百度地图,所以就好好学习了一波百度地图,大概看了官方文档,发现没有想象中那么难,要相信自己可以做出来!

先上效果图:

如图:首先在地图上方有一个筛选条件,总体难度还好吧,虽然有点bug(哈哈),还是能用的!这个地方略过,主要看地图,首先我们需要先申请一个百度地图ak

这个相当于我们的开发凭证 :

申请完了之后我们需要引导到我们项目(vue-cli脚手架搭建项目)中的index.html中,如图:

然后我们需要定义初始化地图的方法,相关参数配置如下:

接着是周边配置的部分,具体样式还请自行编写,先看效果吧:

我们现在return里面定义一个数组指明我们需要查询哪些东西:

然后是查询周边的相关配置,如下:

注意:如果数据是通过调后台接口得到,假如没有数据的话控制台会报百度地图初始化失败(xxx.gc),这个是正常情况.

然后放下代码:

1.只需要marker的地图(请求的数据还请自行修改)

// 地图
initBMap(){
// 百度API功能调用
var map = new BMap.Map("allmap");
var point = new BMap.Point(121.483163,31.217161);
map.centerAndZoom(point,12);
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom();
for(var i=0;i<this.houselist.length;i++){
var marker = new BMap.Marker(new BMap.Point(this.houselist[i].lng,this.houselist[i].lat)); // 创建标注
var points = this.houselist[i].lng+","+this.houselist[i].lat;
var text = this.houselist[i].price;
var point = new BMap.Point(this.houselist[0].lng,this.houselist[0].lat);
map.centerAndZoom(point,12);
var label = new BMap.Label(this.houselist[i].price,{ // 覆盖文字信息
offset: new BMap.Size(0, 0)
});
 
var opts = {
width : 250, // 信息窗口宽度
height: 300, // 信息窗口高度
// title : this.houselist[i].officename , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
}
// 自定义信息窗口
var content = `<div>`;
content += `<img src=${this.houselist[i].logo} style="height:100px;width:100%;margin:0;margin-top:20px;padding:0;">`;
content += `<div><span style="font-size:28px;font-weight:bold;color:#ED4242;">${this.houselist[i].price}</span></div>`;
content += `<div style="height:100px;display:flex;justify-content:space-between;align-items:center;"><div><p style="height:10px;font-size:24px;color:#ff9900;"><span style="font-size:18px;color:#FFE300;">评分:</span>${this.houselist[i].score}<p><p style="height:10px;">${this.houselist[i].zh_name}</p></div>`;
content += `<span style="width:50px;height:50px;line-height:50px;text-align:center;font-size:12px;border-radius:50%;cursor: pointer;background:#FFE300;" onclick="godetails(${this.houselist[i].id})">详情</span>`;
content += `</div>`;
content += `</div>`;
label.setStyle({
background: "#FFE300",
textAlign:"center",
fontSize:'18px',
border:'none',
padding:'7px',
});
 
 
marker.setLabel(label); //把label设置到maker上
map.addOverlay(marker); // 将标注添加到地图中
addClickHandler(content,marker);
function addClickHandler(content,marker){
marker.addEventListener("mouseover",function(e){
openInfo(content,e)}
);
};
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
};
};
},
 
 
 

2.查询周边配置的地图代码:

initBMap() {
// 百度API功能调用
var map = new BMap.Map("allmap");
var point = new BMap.Point(this.houselists.lng, this.houselists.lat,);
map.centerAndZoom(point, 12);
// map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
// map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom();
var address = this.ambitustext;
var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
local.searchNearby(address, point, 1000); // address 为传递的搜索文本
 
var label = new BMap.Label(this.houselists.zh_name , {
offset: new BMap.Size(0, 0)
});
label.setStyle({
background: "#FFE300",
textAlign: "center",
fontSize: "30px",
border:'none',
padding:'22px 23px',
});
label.setZIndex({zIndex:300});
// var myIcon = new BMap.Icon(this.ambitusimg, new BMap.Size(23, 25), {
// offset: new BMap.Size(10, 25)
// });
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setLabel(label); //把label设置到maker上
},
 
ok了,,不懂的欢迎留言共同探讨!文字功底弱,只好多上图了,见谅!
 
 
 

vue结合百度地图Api实现周边配置查询及根据筛选结果显示对应坐标详情的更多相关文章

  1. vue中百度地图API的调用

    1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...

  2. vue引入百度地图api组件封装(根据地址定位)

    Map.vue <template> <div class="Map" :style="{ height: this.height+'px', widt ...

  3. 百度地图API的自动定位路线查询

    功能如下:打开时自动定位到当前位置(浏览器可能会屏蔽自动定位功能,建议手机查看,或直接打开地址:http://1.jingcode.applinzi.com/test2.html),输入目的地点击搜索 ...

  4. 百度地图API位置偏移的校准算法

    转自极客人原文 百度地图API位置偏移的校准算法 在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过. ...

  5. VUE之使用百度地图API

    利用vue创建点餐系统,在点餐系统中需要知道商家地址信息,这时就需要借用百度地图API. 步骤一:申请百度地图密钥: 步骤二:在index.html中添加百度地图JavaScript API接口: & ...

  6. 【百度地图API】北京周边7日游——图标按路线轨迹行动

    原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...

  7. vue项目使用百度地图API获取经纬度

    一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...

  8. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

  9. 百度地图API的使用方法

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

随机推荐

  1. Vue组件通信方式全面详解

    vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...

  2. rabbitmq++:rabbitmq 三种常用的交换机

    更多 rabbitmq 介绍 首先先介绍一个简单的一个消息推送到接收的流程,提供一个简单的图: 黄色的圈圈就是我们的消息推送服务,将消息推送到 中间方框里面也就是 rabbitMq的服务器: 然后经过 ...

  3. Dubbo与Spring Cloud的比较

    区别: ----- 来源(背景): Dubbo,是阿里巴巴服务化治理的核心框架,并被广泛应用于阿里巴巴集团的各成员站点. Spring Cloud,从命名我们就可以知道,它是Spring Source ...

  4. ICPC训练周赛 Benelux Algorithm Programming Contest 2019

    D. Wildest Dreams 这道题的意思是Ayna和Arup两人会同时在车上一段时间,在Ayna在的时候,必须单曲循环Ayna喜欢的歌,偶数段Ayna下车,若此时已经放了她喜欢的那首歌,就要将 ...

  5. linux进程和线程直接通信方式梳理

    对于linux的进程之间.线程直接的通信方式进行梳理,这些都属于基本知识,不过因为知识体系“年久失修”,需要重新总结汇总.

  6. 【linux】【tomcat】linux下定时重启tomcat 【CentOS 6.4】【CentOS 7.6】

    本章内容以CentOS 6.4   和   CentOS  7.6  两个版本为例.[6和7的命令不同] 转载 :https://www.cnblogs.com/sxdcgaq8080/p/10730 ...

  7. Springboot项目中 前端展示本地图片

    Springboot项目中 前端展示本地图片 本文使用的是Springboot官方推荐的thymeleaf(一种页面模板技术) 首先在pom文件加依赖 <dependency> <g ...

  8. P1198 [JSOI2008]最大数(线段树基础)

    P1198 [JSOI2008]最大数 题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制: ...

  9. 数据科学 R语言速成

    文章更新于:2020-03-07 按照惯例,需要的文件附上链接放在文首: 文件名:R-3.6.2-win.exe 文件大小:82.4M 下载链接:https://www.lanzous.com/i9c ...

  10. Linux网络安全篇,进入SELinux的世界(二)

    一.简单的网页制作 1.启动httpd服务 /etc/init.d/httpd start 2.编写首页网页文件 echo "hello,this is my first webPage&q ...