vue中如何在地图中标点…

73e423cec1386fa7eb766ec935dd0cf9.png

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。

前言

昨天分享了下vuev-for的一些特殊用法,料想标题给写成了vi-for…太粗心了。文章连接在这里:

vue中如何使用v-for限制遍历的条数?只查询前三条、查询4-6条怎么实现?

在项目中,难免会遇到这样的需求,在项目中加入地图组件,然后在地图上对某些地点进行标注,那么这样的功能应该怎么实现呢?

引入百度地图

1.执行以下命令,安装:

$ npm install vue-baidu-map --save

2.全局注册或者局部注册:

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {// YOUR_APP_KEY 是在百度地图开发者平台申请的密钥 */ak: 'YOUR_APP_KEY'
})

3.在页面中引入地图组件:

<template><baidu-map class="ditu">  </baidu-map>
</template><style>
.ditu {width: 100%;height: 300px;
}
</style>

效果图:

b2d232bdf76263124d4c9fcb08d51e04.png
地图效果

以上为最基础的写法,下面是我在项目中的写法:

<baidu-mapclass="bmView":scroll-wheel-zoom="true":center="location":zoom="zoom"ak="YOUR_APP_KEY"><!--  显示地图框          --><bm-view style="width: 75%; height:450px; flex: 1;float: left">  </bm-view></baidu-map>

:center表示当前地图的中心。

:zoom表示显示的地图级别。

下面是data中的代码

location: {lng: 113.10424,lat: 34.925694},
zoom: 12.8,   //也可以是6

4.在地图中怎么标注点的位置呢?

首先标注点时需要知道经纬度,一般经纬度信息都从数据库中取出来了,只需要遍历标注点的组件即可,下面是代码:

<bm-marker v-for="m in markers":position="{lng:m.fieldLongitude, lat: m.fieldLatitude}":dragging="true"animation="BMAP_ANIMATION_BOUNCE"></bm-marker>

js部分的data中声明:

markers: {fieldLongitude:0,fieldLatitude:0,},

methods中的方法:

/*根据城市查询器材信息*/getSysEquipmentFieldByCity(){equipmentFieldByCity(this.queryParams).then(response => {this.fieldListByCity = response.data;//在地图上标注出来this.markers = this.fieldListByCity;//将当前地图拉到该省份去if(response.data.length>0){this.location.lng = this.fieldListByCity[0].fieldLongitude;this.location.lat = this.fieldListByCity[0].fieldLatitude;}});},

5.如何实现点击右边的地址,地图就定位到当前点击的地方呢?

0647f01bd968ec707c870021faa51602.png
地图效果

vue部分代码:

<!--   按照省市查询出来的器材信息       --><div class="equipment_count" ><a><div class="equipment_count_item"v-for="(item,i) in fieldListByCity" @click="getLocationByCity(item)"><span class="shuzi">{{i+1}}</span><span class="xinxi">{{item.fieldName}}<br/>{{item.fieldAddress==null?'暂无详细地址':item.fieldProvince+item.fieldCity+item.fieldAddress}}</span></div></a></div>

js部分的代码(点击事件):

/*点击场馆,把地图拉到当前位置*/getLocationByCity(item){/*地图上显示的当前位置*/this.location.lat = item.fieldLatitude;this.location.lng = item.fieldLongitude;this.fieldListByCity = item;this.markers =  this.fieldListByCity;console.log("信息", this.markers);},

至此,效果就实现了。

3585d24f82bc76d99b7d2030451c37c6.gif
点击地址实现跳转地图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/323798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

P3501-[POI2010]ANT-Antisymmetry【hash,二分答案】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP3501 大意 一个01串&#xff0c;如果一个串翻转后取反和原串是相同的&#xff0c;那么这就是个反对称的。求这个01串有多少个子串是反对称的。 解题思路 一个反对称串就是将这个串取反然后放在原串后…

被黑客盯上了…数据都给打包带走了…

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。”前言在创建数据库的时候&#xff0c;突然之间&#xff0c;发现创建的表通过select * from 表名 查询不到了&#xff0c;于是就开始检查是不是sql语句写错了&#xff0c;检查半天&#…

编译原理(二)之语法分析

采用实验1的简单语言&#xff0c;设计并实现含多条简单赋值语句的语法分析程序&#xff0c;要求采用算符优先的分析算法。 注意与实验1、2的衔接。 using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using Syste…

ASP.Net Core Razor 页面路由

在服务器端 Web 应用程序框架中&#xff0c;其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配&#xff0c;以便正确的处理请求。最简单的方法是将 URL 映射到磁盘上的物理文件&#xff0c;在 Razor 页面框架中&#xff0c;ASP.NET团队就是这样实现的。 关于 Ra…

vue实现下拉列表远程搜索示例(根据关键词模糊搜索)

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂”前言昨天的链接没有放上去……大家访问新站的时候&#xff0c;可以在浏览器地址栏中输入&#xff1a;www.穆雄雄.com或者www.muxiongxiong.cn都可以。今天分享的效果如下&#xff1a;ima…

P3538-[POI2012]OKR-A Horrible Poem【hash,字符串】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP3538 题目大意 给一个字符串&#xff0c;有q个询问&#xff0c;询问一个区间最短循环节。 解题思路 首先最短循环节长度一定长度的约数&#xff0c;所以我们可以枚举约数&#xff0c;然后判断循环节…

编译原理(三)之语义分析

采用实验1的简单语言&#xff0c;设计并实现含多条简单赋值语句的语法语义分析程序&#xff0c;要求采用递归下降翻译法。 注意与实验1、2的衔接。 using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.T…

活动: 北京Xamarin分享会第6期(2017年9月9日)

每月第二个周六&#xff0c;北京丹棱街5号微软大厦&#xff0c;有什么活动&#xff1f;对, BXUG线下分享活动又来啦! 本次分享嘉宾阵容庞大&#xff0c;在金秋凉爽的季节&#xff0c;期待与大家面对面的交流。内容预告&#xff1a; 案例分享&#xff1a;某大型国企IT项目如何采…

捡到东西说给钱才给东西?算不算敲诈勒索……

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂”前言前两天&#xff0c;将一个那天急要但是后来就不重要的东西&#xff0c;放在车筐里面&#xff0c;结果到目的地一看&#xff0c;没了……椅子还没坐热&#xff0c;有人打来电话了“你…

编译原理(四)之解析语言翻译成三地址代码

选择部分C语言的语法成分&#xff0c;设计其词法语法语义分析程序。 设计并实现一个一遍扫描的词法语法语义分析程序&#xff0c;将部分C语言的语法成分翻译成三地址代码&#xff0c;要求有一定的出错提示和错误恢复功能。 例如简单赋值语句&#xff1a; area3.14*a*a; s 2*…

POJ3784-Running Median(运行中位数)【链表】

正题 题目链接&#xff1a;http://poj.org/problem?id3784 题目大意 给出n个数&#xff0c;每两个数输出一次到目前为止输入了的所有数的中位数。 解题思路 我们使用离线算法。 既然这是一个一个输入&#xff0c;那么我们就用秘技时光倒流之数。先把所有数加入进去&#x…

[北京微软技术直通车]前端 Visual Studio Code 开发 Angular 与亿级 SQL Servern

微软技术直通车第一期将于2017年9月9日与大家见面&#xff0c;本次邀请华北区微软技术专家和大家一起交流前端工具与技术&#xff0c; Visual Studio Code&#xff0c;TypeScript 与 Anuglar 项目开发和亿级数据库运维的最佳实践&#xff0c;分享相关技术的发展前景和从业经验&…

vue中如何实现全全全屏和退出全屏?

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂”最近总有人给我说ta有社恐&#xff0c;明明是有社牛好不好……前言在做大屏界面的时候&#xff0c;客户有个要求&#xff0c;一进去登录成功之后&#xff0c;要有全屏的功能&#xff0c;…

Spring MVC请求url无效问题思考

一、Controller没有配置 page not found or method not supported. 没有扫描到包里面的controller类 <context:component-scan base-package"com.mk.controller" /> 二、请求方式GET/POST org.springframework.web.servlet.PageNotFound noHandlerFound No…

P1160-队列安排【链表】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP1160 题目大意 有nn个人,编号是1&#x223C;n" role="presentation">1∼n1∼n&#xff0c;然后开始时插入第一个人&#xff0c;之后每次可以插入到一个人的左边或右边&#xff0…

【深圳】掌通宝科技有限公司技术总监(兼架构师),约吗

技术总监&#xff08;兼架构师&#xff09; 岗位职责&#xff1a; 1、主持研发中心日常管理工作&#xff0c;负责公司O2O平台,SaaS平台管理&#xff1b; 2、负责公司.net后台&#xff0c;Android客户端、IOS客户端、WEB平台等架构设计&#xff1b; 4、解决开发中的技术问题…

树层级处理上万条数据优化!

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。”前言项目中&#xff0c;部门数超万&#xff0c;导致页面加载价卡顿怎么办&#xff1f;使用若依自带解析树的方法在本地运行没有任何问题&#xff0c;但是一发布到服务器上就显示加载超…

Idea Tomcat启动报异常CannotLoadBeanClassException

一、现象展现 Idea配置占用了C磁盘的所有空间&#xff0c;删除Idea配置目录后&#xff0c;改为D磁盘存储Idea配置。 由于idea的Artifact&#xff08;war explode包&#xff09;在没有整个项目重新构建情况下没有执行热发布&#xff0c;从而删除Artifact的war和war explode包&…

P3435-[POI2006]OKR-Periods of Words【KMP】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP3435 大意 一个字符串&#xff0c;对于每个前缀&#xff0c;求复制一份放在末尾可以覆盖整个前缀的前缀&#xff0c;求所有的长度和。 解题思路 这道题如果暴力的话很简单&#xff0c;对于每个前缀每…

Orleans解决并发之痛(三):集群

Orleans本身的设计是一个分布式的框架&#xff0c;多个Silo构成集群&#xff0c;Grains分布在多个Silo中。一旦一个Silo挂了&#xff0c;原来归属这个Silo的Grains会自动在其他Silo中激活。生产环境下还是需要以集群方式来部署。 cluster 在Orleans解决并发之痛&#xff08;二…