找人做网站推广,c语言基础知识入门,无极网最新招聘信息,如何精准引流呢目录
示例#xff1a;
准备#xff1a;
?编辑
开始#xff1a;
1、新建页面#xff0c;在script标签中引入百度地图的api数据#xff0c;把自己在控制台创建的应用的ak替换上去
2、创建一个dom对象#xff0c;设置宽高
3、在js中初始化地图
进阶#xff1a;
1…目录
示例
准备
?编辑
开始
1、新建页面在script标签中引入百度地图的api数据把自己在控制台创建的应用的ak替换上去
2、创建一个dom对象设置宽高
3、在js中初始化地图
进阶
1、地图标注
2、定位
3、导航
?编辑
4、公交路线规划
6、坐标转化
完整demo代码 示例
完整demo截图 准备
1、注册百度地图api账号地址百度地图开放平台
2、进入控制台 - 应用管理 - 我的应用 - 创建应用填写相关信息 开始
1、新建页面在script标签中引入百度地图的api数据把自己在控制台创建的应用的ak替换上去 script typetext/javascript srchttps://api.map.baidu.com/api?v1.0typewebglak这里替换成自己的ak/script2、创建一个dom对象设置宽高
div idmap classmapBox/div3、在js中初始化地图
// 初始化地图
initMap(){var map new BMapGL.Map(map);//绑定创建的dom元素的idvar point new BMapGL.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
},完成以上步骤就能看到基础的一张地图了 进阶
1、地图标注
实现效果点击地图弹出弹框输入信息添加一个标注点。
要实现该效果首先要监听点击事件
this.map.addEventListener(click, this.addLabel);点击添加标注点
// 添加地图标点
addLabel(e) {let that thisvar point new BMapGL.Point(e.latlng.lng, e.latlng.lat)var mk new BMapGL.Marker(point);console.log(mk);this.$prompt(请输入内容, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,}).then(({ value }) {mk.id Math.random()*100000000000000000mk.text value?value:console.log(mk);this.mkList.push({id:mk.id,text:mk.text,latLng:mk.latLng})this.map.addOverlay(mk);var opts {width : 200, // 信息窗口宽度height: 100, // 信息窗口高度title : , // 信息窗口标题message:}var infoWindow new BMapGL.InfoWindow(value?value:, opts); // 创建信息窗口对象 mk.addEventListener(click, function(e){that.map.openInfoWindow(infoWindow, point); //开启信息窗口});}).catch(() {});
},删除标点根据添加时生成的id去标点集合里匹配删除对应id 的数据
// 删除地图标点
deleteLabelById(id){var allOverlay this.map.getOverlays();for (var i 0; i allOverlay.length ; i){if(allOverlay[i].idallOverlay[i].idid){this.map.removeOverlay(allOverlay[i]);}}
},2、定位
// 获取定位
var geolocation new BMapGL.Geolocation();
geolocation.getCurrentPosition(function(r){if(this.getStatus() BMAP_STATUS_SUCCESS){map.centerAndZoom(r.point, 15); //r.point就是当前定位坐标设置为地图中心点var mk new BMapGL.Marker(r.point); map.addOverlay(mk);//添加标点map.panTo(r.point);console.log(您的位置 r.point.lng , r.point.lat);that.city r.address.citythat.address ${r.address.province}-${r.address.city}-${r.address.district}-${r.address.street}-${r.address.street_number}号 //中文 详细地址}else {alert(failed this.getStatus());}
});3、导航
this.p1是终点坐标this.p2是起点坐标
if(this.type1){// 行车导航路线规划var output this.driving new BMapGL.DrivingRoute(this.map, {renderOptions:{map: this.map, autoViewport: true},onSearchComplete: function(results){if (that.driving.getStatus() ! BMAP_STATUS_SUCCESS){return ;}var plan results.getPlan(0);output 总时长 plan.getDuration(true); //获取时间output 总路程 plan.getDistance(true); //获取距离that.output outputconsole.log(output)},});// p2,p1为起点和目标点的坐标this.driving.search(this.p2, this.p1);
}else if(this.type2){// 公交路线规划var output this.transit new BMapGL.TransitRoute(this.map,{renderOptions: {map: this.map,panel:panel},onSearchComplete: function(results){if (that.transit.getStatus() ! BMAP_STATUS_SUCCESS){return ;}var plan results.getPlan(0);output 总时长 plan.getDuration(true); //获取时间output 总路程 plan.getDistance(true); //获取距离that.output outputconsole.log(output)},});this.transit.search(this.p2, this.p1);
}else{// 步行路线规划var output this.walking new BMapGL.WalkingRoute(this.map, {renderOptions:{map: this.map, autoViewport: true},onSearchComplete: function(results){if (that.walking.getStatus() ! BMAP_STATUS_SUCCESS){return ;}var plan results.getPlan(0);output 总时长 plan.getDuration(true); //获取时间output 总路程 plan.getDistance(true); //获取距离that.output outputconsole.log(output)},});this.walking.search(this.p2, this.p1);
}4、公交路线规划
注意公交车导航可以配置以下参数获取公交路线规划
div idpanel/divrenderOptions: {map: this.map,panel:panel},6、坐标转化
目前国内主要有以下三种坐标系
WGS84为一种大地坐标系也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。
GCJ02又称火星坐标系是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
BD09为百度坐标系在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标bd09mc表示百度墨卡托米制坐标。
非中国地区地图服务坐标统一使用WGS84坐标。
百度地图需要用BD09坐标如果是天地图坐标WGS84,则需要作转化
WGS84 – 转– BD09
var convertor new BMapGL.Convertor();
let point new BMapGL.Point(intitude,latitude) //intitude,latitude为天地图坐标
convertor.translate([point], COORDINATES_WGS84, COORDINATES_BD09, (data){if(data.status 0) {let point data.points[0]if(point){// 此时得到的就是百度地图坐标console.log(point)}}
})完整demo代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title百度地图功能demo/titlelink relstylesheet href/css/element.cssscript src/js/vue.min.js/scriptscript src/js/element.js/script!-- 这里替换成自己的ak --script typetext/javascript srchttps://api.map.baidu.com/api?v1.0typewebglak自己的ak/scriptstylebody {margin: 0;box-sizing: border-box;}.mapBox {/* width: calc(100vw - 400px); */flex-grow: 1;height: 100vh;}.leftBox {width: 400px;height: 100vh;box-sizing: border-box;overflow-y: auto;overflow-x: hidden;transition: 0.6s;}.leftBoxHide {width: 0px;height: 100vh;box-sizing: border-box;overflow-y: auto;overflow-x: hidden;transition: 0.6s;}.tool {width: 400px;height: 270px;border-radius: 5px;font-size: 12px;padding: 10px;box-sizing: border-box;}.infoBox {padding: 0 5px;}.icon {position: fixed;bottom: 10px;left: 10px;width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;background-color: #fff;z-index: 99;cursor: pointer;}/style
/head
bodydiv idapp styledisplay: flex;position: relative;div classicon clickclickShowToolimg src./component.png alt stylewidth: 30px;height: 30px;/divdiv :classtoolStatus?leftBox:leftBoxHidediv classtooldivspan当前位置:/spanspan v-ifaddress{{address}}/spanspan v-else暂无定位/span/divdiv v-ifp2 stylepadding-top: 10px;地址坐标:({{p2.lng}},{{p2.lat}})/divdiv styledisplay: flex;align-items: center;padding-top: 10px;div目的地/divdivel-input v-modelkeyWords sizesmall/el-input/divdiv stylemargin-left: 10px;el-button typeprimary sizesmall clicksearchArea搜索/el-buttonel-button typeprimary sizesmall clicksearchArea(dh)导航/el-button/div/divdiv styledisplay: flex;align-items: center;padding-top: 10px;div规划导航路线/divdivel-select v-modeltype sizesmall placeholder请选择 changechangeel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select/div/divdiv styledisplay: flex;align-items: center;padding-top: 10px;div开启/关闭交通流量情况/divdivel-switchv-modelswitchValsizesmallchangechangeSwitch//div/divdiv styledisplay: flex;align-items: center;padding-top: 10px;div开启/关闭地图标注(font colorred单击添加/font)/divdivel-switchv-modelmapLabelsizesmallchangechangeSwitchLabel//div/divdiv styledisplay: flex;align-items: center;padding-top: 10px;div显示/隐藏地图标注/divdivel-switchv-modelmapLabel2sizesmallchangechangeSwitchLabel2//div/divdiv stylepadding-top: 10px; v-iftype1||type3{{output}}/div/divdiv classinfoBoxdiv idpanel/div/div/divdiv idmap classmapBox/div/div
/body
scriptvar app new Vue({el: #app,data () {return {mapLabel:false,mapLabel2:false,switchVal:false,toolStatus:false,map:null,type:1,p1:null,p2:null,address:,options:[{label:行车,value:1},{label:公交,value:2},{label:步行,value:3},],output:,keyWords:,city:,driving:null,transit:null,walking:null,mkList:[],}},mounted () {this.initMap()this.mkList window.localStorage.getItem(nkList)?JSON.parse(window.localStorage.getItem(nkList)):[]// console.log(JSON.parse(this.mkList));let that thiswindow.addEventListener(beforeunload, function(e) { if(that.mkList.length){window.localStorage.setItem(nkList,JSON.stringify(that.mkList))}});},methods: {// 开启关闭地图标注changeSwitchLabel(e){this.mapLabel eif(e){// 开启地图点击事件监听this.map.addEventListener(click, this.addLabel);}else{this.map.removeEventListener(click,this.addLabel);}},//显示隐藏地图标注 changeSwitchLabel2(e){this.mapLabel2 eif(e){// 回显标点let that thisthis.mkList.forEach((item){var mk new BMapGL.Marker(item.latLng);mk.id item.idmk.text item.textconsole.log(mk);that.map.addOverlay(mk);var opts {width : 200, // 信息窗口宽度height: 100, // 信息窗口高度title : , // 信息窗口标题message:}var infoWindow new BMapGL.InfoWindow(item.text, opts); // 创建信息窗口对象 mk.addEventListener(click, function(e){that.map.openInfoWindow(infoWindow, item.latLng); //开启信息窗口});mk.addEventListener(dblclick,function(e){that.p1 new BMapGL.Point(item.latLng.lng,item.latLng.lat)that.change()})})}else{console.log(this.driving,this.transit,this.walking);this.driving?.clearResults();this.transit?.clearResults();this.walking?.clearResults();console.log(this.driving,this.transit,this.walking);// 删除标点this.mkList.forEach((item){this.deleteLabelById(item.id)})}},// 开启关闭交流流量图changeSwitch(e){console.log(e);this.switchVal eif(e){this.map.setTrafficOn(); // 添加交通流量图层}else{this.map.setTrafficOff(); // 移除交通流量图层}},// 切换出行路线规划方式change(){console.log(this.p1,this.p2);if(!(this.p1this.p2)){return}this.driving?.clearResults();this.transit?.clearResults();this.walking?.clearResults();let that thisthat.output console.log(this.type);if(this.type1){// 行车导航路线规划var output this.driving new BMapGL.DrivingRoute(this.map, {renderOptions:{map: this.map, autoViewport: true},onSearchComplete: function(results){if (that.driving.getStatus() ! BMAP_STATUS_SUCCESS){return ;}var plan results.getPlan(0);output 总时长 plan.getDuration(true); //获取时间output 总路程 plan.getDistance(true); //获取距离that.output outputconsole.log(output)},});// p2,p1为起点和目标点的坐标that.driving.search(this.p2, this.p1);}else if(this.type2){// 公交路线规划var output this.transit new BMapGL.TransitRoute(this.map,{renderOptions: {map: this.map,panel:panel},onSearchComplete: function(results){if (that.transit.getStatus() ! BMAP_STATUS_SUCCESS){return ;}var plan results.getPlan(0);output 总时长 plan.getDuration(true); //获取时间output 总路程 plan.getDistance(true); //获取距离that.output outputconsole.log(output)},});that.transit.search(this.p2, this.p1);}else{// 步行路线规划var output this.walking new BMapGL.WalkingRoute(this.map, {renderOptions:{map: this.map, autoViewport: true},onSearchComplete: function(results){if (that.walking.getStatus() ! BMAP_STATUS_SUCCESS){return ;}var plan results.getPlan(0);output 总时长 plan.getDuration(true); //获取时间output 总路程 plan.getDistance(true); //获取距离that.output outputconsole.log(output)},});that.walking.search(this.p2, this.p1);}},// 初始化地图initMap(){let that thisvar map new BMapGL.Map(map); //绑定创建的dom元素的idthat.map mapmap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放// 获取定位var geolocation new BMapGL.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() BMAP_STATUS_SUCCESS){console.log(r);that.p2 r.pointmap.centerAndZoom(r.point, 15);var mk new BMapGL.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);console.log(您的位置 r.point.lng , r.point.lat);that.city r.address.citythat.address ${r.address.province}-${r.address.city}-${r.address.district}-${r.address.street}-${r.address.street_number}号}else {alert(failed this.getStatus());} });console.log(11,map);},// 搜索地区searchArea(i){this.deleteLabelById(searchLabel)this.driving?.clearResults();this.transit?.clearResults();this.walking?.clearResults();if(!this.keyWords)returnlet that thisconsole.log(this.keyWords);//创建地址解析器实例var myGeo new BMapGL.Geocoder();// 将地址解析结果显示在地图上并调整地图视野myGeo.getPoint(this.keyWords, function(point){if(point){that.map.centerAndZoom(point, 16);// //创建地址标注var marker new BMapGL.Marker(point); // 创建标注marker.id searchLabelthat.map.addOverlay(marker);that.p1 pointif(idh){that.change()}}else{alert(您选择的地址没有解析到结果);}}, that.city)},// 添加地图标点addLabel(e) {let that thisvar point new BMapGL.Point(e.latlng.lng, e.latlng.lat)var mk new BMapGL.Marker(point);console.log(mk);this.$prompt(请输入内容, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,}).then(({ value }) {mk.id Math.random()*100000000000000000mk.text value?value:console.log(mk);this.mkList.push({id:mk.id,text:mk.text,latLng:mk.latLng})this.map.addOverlay(mk);var opts {width : 200, // 信息窗口宽度height: 100, // 信息窗口高度title : , // 信息窗口标题message:}var infoWindow new BMapGL.InfoWindow(value?value:, opts); // 创建信息窗口对象 mk.addEventListener(click, function(e){that.map.openInfoWindow(infoWindow, point); //开启信息窗口});}).catch(() {});},// 删除地图标点deleteLabelById(id){var allOverlay this.map.getOverlays();for (var i 0; i allOverlay.length ; i){if(allOverlay[i].idallOverlay[i].idid){this.map.removeOverlay(allOverlay[i]);}}},// 点击显隐工具栏clickShowTool(){console.log(aaa);this.toolStatus !this.toolStatus}},})
/script
/html
