vue项目中加载使用腾讯地图

在vue-cli脚手架搭建的vue项目里使用到了腾讯地图。看了腾讯地图的官方给出的API（https://lbs.qq.com/javascript_v2/index.html）敲了一遍代码，才有点感觉写一个总结点的东西。

使用前需要在index.html里引入<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>才可以使用地图。我想的是（还没开始使用）单独封装成一个组件，使用的时候再在父组件里引用；以下都是在地图组件文件（如map.vue）里写的内容。

1、模板里通过给了id（为container）的div来承载地图；

在页面挂载时就要加载地图，所以在<script>里要先初始化地图，即

mounted () {

this.init()

}

接着在methods里写init方法（以下内容都是写在init里的）。

2、开始创建地图实例，并为其添加事件、添加标记、添加信息窗口、覆盖物、以及搜索poi（如酒店的位置）、驾车线路方案、地址解析。（标记聚合点看了但不清楚用途并且感觉项目里也不会用，所以没有写出来）

//创建地图实例

var map=new qq.maps.Map(document.getElement('container'),{

center,//坐标，即最初显示的地图中心

zoom //缩放级别，即显示的比例

}）

//给地图添加事件，可以click、mouseover、mouseout等，这样的事件也可添加到marker、polyline上，即map的位置换了即可

qq.maps.event.addListener(map,'click',function(res){

//res即点击后的位置信息

})

//添加标记

var marker=new qq.maps.Marker({

position,//标记点的位置，也可以是通过IP获取到的坐标

map,//标记在哪个地图上

animation,//标记显示时的动画效果

title,//鼠标悬浮到标记上时的标题

draggable //是否可拖拽，为true时也可获取到拖拽后的位置信息，即通过给marker添加position_changed事件（和给地图添加事件差不多，只是把click换成position_changed）

})

//创建信息窗口

var info=new qq.maps.InfoWindow({

map,//标记在哪个地图上

content//信息窗口的内容，和下方info.setContent结果一样，二选一

})

//弹出信息窗口的方式及内容，可以放到事件中，如移入标记点时（mouseover）显示出信息窗口

info.open();

info.setContent('<div>位置是</div>');//可以有标签以及样式

info.setPosition(marker.getPosition());//信息窗口的位置，这里是放到通过marker的getPosition方法获取到坐标上

//然后移出时（mouseout）关闭信息窗口

info.close()

//覆盖物

//有折线(Polyline)、多边形(Polygon)、圆形(Circle)、文本标注(Label），每个的qq.maps.XXX不一样，里面的配置项也有些差别，但大体实现思路一致，只列出折线覆盖物。当然还有一些方法，我现在还没想到用在哪里，所以就没写，如setMap显示在哪个地图上等，是通过按钮点击然后再触发

var polyline=new qq.maps.Polyline({

map,//标记在哪个地图上

path,//一个坐标数组，折线、多边形就是依靠这些坐标数组来成形的

strokeColor,//折线颜色

strokeDashStyle,//折线样式

strokeWeight,//折线宽度

editable,//折线是否可编辑，即是否可以移动折线中的点，并且可以获取到移动后的位置信息，用事件接受返回值即可qq.maps.event.addListener(polyline,'click',function(res){//res里即包含了位置信息})

clickable//是否可点击

})

//搜索poi

var latLngBounds=new qq.maps.LatLngBounds();//描述一个矩形的地理坐标，为了有了标记点后改变视野用

var markers=[];//标记点们

//创建搜索实例

var searchService=new qq.maps.SearchService({

location,//搜索范围，默认全国，如果限制必须是市级的

pageIndex,//页码，即最初显示的是第几页的数据，从0开始是第一页

pageCapacity,//每页显示的结果数

panel,//展现结果的HTML容器

autoExtend,//是否自动扩大检索区域

complete:function(res){

var pois=res.detail.pois;//符合搜索条件的所有地址信息

for(let i=0;i<pois.length;i++){

var poi=pois[i];//获取到每个检索到的地址信息对象

latLngBounds.extend(poi.latLng);//扩展边界范围，用来包含检索到的poi点

var marker=new qq.maps.Marker({map,position:poi.latLng})

markers.push(marker);//将marker添加到markers数组里，就会在地图上自动显示出标记点们

}

map.fitBounds(latLngBounds);//随着搜索结果自动调整地图视野

}

})

//清楚标记，点击按钮时要先清除上一次的标记点

var clearOverlays=function(overlays){

var overlay;

while(overlay=overlays.pop()){

overlay.setMap(null);//代表markers不设置到地图上，即清除了标记点

}

}

//同样是通过按钮点击后执行搜索

var searchBtn=document.getElement('searchBtn');

qq.maps.event.addDomListener(searchBtn,'click',function(){

clearOverlays(markers);

var keyword=....value;//输入框的值

searchService.search(keyword);

})

//驾车线路

var drivingService=new qq.maps.DrivingService({

map,

panel,//有id的div标签来放线路信息

complete//和下方的setComplete一样的效果，二选一

})

//设置回调

drivingService.setComplete(function(res){

if(res.type==qq.maps.ServiceResultType.MULTI_DESTINATION){//如果type等于的话是模糊搜索即符合关键字的信息都会出来，此时就默认搜索起点、终点的第一项

drivingService.search(res.detail.start[0],res.detail.end[0]);

}

})

//输入框输入搜索的起点、终点后点击搜索按钮进行搜索

var lineBtn=document.getElement('lineBtn');

qq.maps.event.addDomListener(lineBtn,'click',function(){

var start=...;//起点输入框的值

var end=...;//终点输入框的值

drivingService.search(start,end);

})

//地址解析

var geocoder=new qq.maps.Geocoder({});

geocoder.setComplete(function(res){

//res里包含查询到的地址信息，可以创建marker来标记，或者信息窗口等

})

//同样是对输入框的内容进行搜索，即要点击按钮得结果

var addressBtn=document.getElement('addressBtn');

qq.maps.event.addDomListener(addressBtn,'click',function(){

var address=...;

geocoder.getLocation(address);//输入地址搜索出对应坐标

geocoder.getAddress(address);//输入坐标搜索出对应地址

})

这只是学习过一遍API后顺的代码思路，没有具体的结合项目需求（因为项目还没开始）。

欢迎大家互相沟通学习，共同进步。

（~ ^_^ ~）

vue项目中加载使用腾讯地图相关推荐

Vue项目中加载图片的坑
Vue项目中加载图片时,遇到的坑 1.当直接在标签中,使用图片路径,此时可以正常显示. <img src='img_src' /> 正常显示 2.当img标签的src属性为变量时,且该变量 ...
【Vue-router中，require代替import解决vue项目首页加载时间过久】
vue-router中,require代替import解决vue项目首页加载时间过久的问题 - 雨打芭蕉wt - 博客园
vue 项目在加载完成之前，显示预置加载动画
vue 项目在加载完成之前,显示预置加载动画自己有一个日记项目,由于服务器带宽很小1MB,在加载之前页面中显示是空白的,就想给它加个前置的动画,这个用户体验更好. 一.实现 1. 定义项目入口如果 ...
vue项目批量加载url文件并打包到zip下载
vue项目批量加载url文件并打包到zip下载项目里之前是遇到这样一个需求哈,需要根据选择的不同动态批量生成并下载图片, 而且这个图片不是一张一张生成下载,而是要等他选好条件之后, 把对应的图片动态 ...
在Vue.js中加载字体的最佳做法
博客原文:https://blog.zhangbing.site/2021/04/07/best-practices-for-loading-fonts-in-vue/ 添加字体不应该对性能产生负面影 ...
Angular(4)中加载Arcgis for JavaScript地图
背景近期我司项目的需要,采用Angular(4)+SpringBoot前后端分离的架构.并且在需要在项目中实现Arcgis地图. 本人之前有过Arcgis for JavaScript的小小填坑经验 ...
Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 上面加载显示 ...
Openlayers中加载GeoJson文件显示地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSD ...
arcgis中如何导出奥维可识别的图_如何在奥维中加载ArcGIS发布的地图服务
在工作中,您可能有大量的航拍图需要在奥维中加载显示,但直接导入航拍图的数据处理量较大.对电脑硬件的要求较高.因此,您可以通过ArcGIS将航拍图发布成地图服务,在奥维中以在线自定义地图的形式加载. 1 ...

vue项目中加载使用腾讯地图

vue项目中加载使用腾讯地图相关推荐

最新文章

热门文章