vue天地图开发实战,解决高德百度,无卫星图问题
2020/4/1 11:01:39
本文主要是介绍vue天地图开发实战,解决高德百度,无卫星图问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在实际开发过程中,发现高德和百度地图等,无法使用卫星图查看乡镇问题,遂使用政府开发的天地图。写一份实(jiao)战(xue)记录,为开源精神做一份贡献。
讲解的功能有
- 天地图入门
- 地图渲染
- 添加地图控件
- 定位用户坐标,绘制城市边界,并通过移动标点重新定位经纬度
- 添加多个点,并且点击弹出信息框
项目使用vue-cli3,vue2开发
1、在public-index.html引入天地图cdn
<!--index.html--> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script> 复制代码
key申请地址 应用创建成功就能看到key
2、渲染dome
<!--创建dome容器--> <div id="mapDiv" style="position:absolute;width:100%; height:100%"></div> 复制代码
//生命周期 - 在挂载完成(可以访问DOM元素) mounted() { this.onLoad() }, methods(){ onLoad(){ let that=this //将方法放在mounted,会有指向问题,定义this使用就会正常 let zoom = 12; //地图的初始化级别,及放大比例 that.map = new T.Map("mapDiv"); that.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom); //地图的初始化中心点,此为北京的经纬度 } } 复制代码
3、添加地图类型控件
var ctrl = new T.Control.MapType([ { title: "地图", //地图控件上所要显示的图层名称 icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标(默认图标大小80x80) layer: TMAP_NORMAL_MAP //地图类型对象,即MapType。 }, { title: "卫星混合", icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png", layer: TMAP_HYBRID_MAP } ]); that.map.addControl(ctrl); 复制代码
我只添加了两种类型的卫星,更多类型可以查看官方文档。
值得注意的是:官方文档提供的代码格式错误,不能直接copy下来用
4、定位用户坐标,绘制城市边界,并通过移动标点重新定位经纬度
<!--添加点击按钮--> <button style="position: absolute; z-index: 500; border: 1px solid; right: 7%; bottom: 10%; color: red; background: green; padding: 10px;" @click="positionBtn" >定位坐标</button> 复制代码
data() { //这里存放数据 return { cityName:"" //暂存城市名称 }; }, positionBtn() { let that =this // this.map.clearOverLays(); //清理地图上的覆盖物 let lc = new T.LocalCity(); //创建一个获取本地城市位置的实例 lc.location(function(e) { //利用ip进行定位 alert(e.cityName); let marker = new T.Marker(e.lnglat); //e.lnglat,标注点的地理坐标 that.map.addOverLay(marker); //addOverLay方法,将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次。 that.getMap(); //创建地图对象 marker.addEventListener("dragend", overlay_style); //添加事件监听函数。 marker.enableDragging(); //开启标注拖拽功能 function overlay_style(e) { let p = e.target; alert( "该地区经纬度是:" + p.getLngLat().lng + "," + p.getLngLat().lat ); } }); }, getMap() { let that= this //创建对象 let administrative = new T.AdministrativeDivision(); //创建一个获取行政区划的实例 let config = { needSubInfo: false, //是否需要下一级信息 needAll: false, //是否需要所有子节点。 needPolygon: true,//是否需要行政区划范围。 needPre: true,//是否需要上一级所有信息。 searchType: 1,//查询类型。0表示根据code查询,1表示根据名称查询。 searchWord: this.cityName//查询行政区划的名称。 }; administrative.search(config, searchResult);//方法:根据检索词发起检索,searchResult:回调参数 function searchResult(result) { if (result.getStatus() == 100) { let data = result.getData(); that.showMsg(data); } else { result.getMsg(); } } //具体内容详见AdministrativeDivisionResult类。 }, showMsg(data) { for (let i = 0; i < data.length; i++) { //解释上级行政区划 if (data[i].parents) { let upLevel = ""; if (data[i].parents.country) { upLevel += data[i].parents.country.name; } if (data[i].parents.province) { upLevel += data[i].parents.province.name; } } if (data[i].points) { //绘制行政区划 this.polygon(data[i].points); } //解释下级行政区划 if (data[i].child) { showMsg(data[i].child); console.log(data[i].child.points); if (data[i].child.points) { //绘制行政区划 this.polygon(data[i].child.points); } } } }, polygon(points) { let that=this let pointsArr = []; for (let i = 0; i < points.length; i++) { let regionLngLats = []; let regionArr = points[i].region.split(","); for (let m = 0; m < regionArr.length; m++) { let lnglatArr = regionArr[m].split(" "); let lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]); regionLngLats.push(lnglat); pointsArr.push(lnglat); } //创建面对象,样式 let polygon = new T.Polygon(regionLngLats, { color: "#fd737a", weight: 3, opacity: 1, fillColor: "#FFFFFF", //填充颜色。 fillOpacity: 0.3 //填充透明度 }); //向地图上添加行政区划面 that.map.addOverLay(polygon); } //显示最佳比例尺 that.map.setViewport(pointsArr); alert( "当前地图中心点:" + that.map.getCenter().getLng() + "," + that.map.getCenter().getLat() ); }, 复制代码
5、添加多个点,并且点击弹出信息框
<!--添加点击按钮--> <button style="position: absolute; z-index: 500; border: 1px solid; right: 7%; bottom: 5%; color: red; background: green; padding: 10px;" @click="pointsBtn" >添加多个点</button> 复制代码
pointsBtn() { let that=this let data_info = [ [ 116.417854, 39.921988, "地址:北京市东城区王府井大街88号乐天银泰百货八层" ], [116.406605, 39.921585, "地址:北京市东城区东华门大街"], [116.412222, 39.912345, "地址:北京市东城区正义路甲5号"] ]; for (let i = 0; i < data_info.length; i++) { let marker = new T.Marker( new T.LngLat(data_info[i][0], data_info[i][1]) ); // 创建标注 let content = data_info[i][2]; that.map.addOverLay(marker); // 将标注添加到地图中 that.addClickHandler(content, marker); } }, addClickHandler(content, marker) { marker.addEventListener("click", function(e) { that.openInfo(content, e); }); }, openInfo(content, e) { let point = e.lnglat; that.marker = new T.Marker(point); // 创建标注 let markerInfoWin = new T.InfoWindow(content, { offset: new T.Point(0, -30) }); // 创建信息窗口对象 that.map.openInfoWindow(markerInfoWin, point); //开启信息窗口 }, 复制代码
使用自定义信息框,会涉及到利用三目运算符,根据数字转换成对应字符的问题,记得用()把三木运算符括起来,否则会导致前面的html无法渲染
结语
网上写天地图的文章挺少,其实只要把坑踩过了还是挺好用的。 觉得有用的小伙伴,可以请我喝杯奶茶以资鼓励。
这篇关于vue天地图开发实战,解决高德百度,无卫星图问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南