备注:
请在服务器下https的环境域名下进行定位使用，不然定位精度很差。
请先申请自己的key。
<!--完整实例 请自己替换key-->
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><!--在head标签中添加meta标签，并设置viewport-fit=cover值--><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,viewport-fit=cover"><!--开启safe-area-inset-bottom属性--><van-number-keyboardsafe-area-inset-bottom/><!--引入样式文件--><linkrel="stylesheet"href="/npm/vant@2.2/lib/index.css"><!--引入Vue和Vant的JS文件--><scriptsrc="/npm/vue/dist/vue.min.js"></script><scriptsrc="/npm/vant@2.2/lib/vant.min.js"></script><!--地图定位--><scriptcharset="utf-8"crossorigin="anonymous"src="/api/js?v=2.exp&key=？"></script><scriptsrc="/lightmap/components/geolocation/geolocation.min.js"></script><title>入住</title></head><body><divid="app"><divclass="content"><van-cell-group><van-fieldv-model="formdata.contact_name"placeholder="请输入联系人姓名"requiredclearablelabel="联系人姓名"/></van-cell-group><van-cell-group><van-fieldv-model="formdata.phone"type="tel"placeholder="请输入手机号"label="手机号"requiredclearable/></van-cell-group><van-cell-group><van-fieldv-model="formdata.home_phone"type="tel"placeholder="请输入固定电话"label="固定电话"requiredclearable/></van-cell-group><van-cell-group><van-fieldv-model="pany_name"type="text"placeholder="请输入公司地址"label="公司名称"requiredclearable/></van-cell-group><van-cell-group><van-fieldv-model="pany_postion"type="text"label="公司地址"requiredclearable/></van-cell-group><van-cellis-link@click="showPopup">公司经营范围{{formdata.category_name}}</van-cell><van-popupv-model="show"position="bottom"style="height:30%;"><van-pickershow-toolbar:columns="columns"@cancel="showPicker"@confirm="onConfirm"/></van-popup><van-cell-group><van-fieldv-model="formdata.postion"type="text"placeholder="点击打开地图选择公司位置":label="action"requiredclearabledisabled@click="showMap"/></van-cell-group><divid="maps"v-show="isMapShow"></div><van-cell-group><van-buttontype="primary"@click="submit">提交</van-button></van-cell-group></div></div></body><script></script><script>//在#app标签下渲染一个按钮组件newVue({el:'#app',data:{formdata:{contact_name:'',phone:'',home_phone:'',company_name:'',company_postion:'',category_name:'',category_id:'',info_desc:'',postion:'',jin:'',wei:''},action:'公司坐标选择',isMapShow:false,showPicker:false,columns:['土木','水泥','钢铁','铁','水管'],columnss:[{id:1,name:'土木'},{id:2,name:'水泥'},{id:3,name:'钢铁'},{id:4,name:'铁'},{id:5,name:'水管'},],show:false,map:'',mapLister:'',marker:'',currentPosition:'',center:''},methods:{submit:function(){console.log(this.formdata)},onConfirm:function(value,index){console.log(value,index)this.formdata.category_name=this.columnss[index].namethis.formdata.category_id=this.columnss[index].idthis.show=false},showPopup:function(){this.show=true;},//初始化地图函数自定义函数名initshowTeachMap:function(){varself=thisself.center=newqq.maps.LatLng(39.916527,116.397128)//定义map变量调用qq.maps.Map()构造函数获取地图显示容器this.map=newqq.maps.Map(document.getElementById('maps'),{center:self.center,//地图的中心地理坐标。zoom:18,//地图的中心地理坐标。});//创建markerif(self.marker==null||self.marker==''){self.marker=newqq.maps.Marker({position:self.center,map:self.map});}//定义监听//绑定单击事件添加参数this.mapLister=qq.maps.event.addListener(this.map,'click',function(event){self.formdata.postion=event.latLng.getLat()+','+event.latLng.getLng()self.formdata.jin=event.latLng.getLat()self.formdata.wei=event.latLng.getLng()self.marker.setPosition(event.latLng)self.map.setCenter(event.latLng)self.center=event.latlng});if(this.currentPosition==''||this.currentPosition==null){this.getCurrent()}},//显示地图showMap:function(){if(this.map==null||this.map==''){this.showTeachMap();}this.isMapShow=!this.isMapShowthis.isMapShow?this.action='点击关闭地图':this.action='公司坐标选择'},getCurrent:function(){varself=thisthis.currentPosition=newqq.maps.Geolocation('？','？')this.currentPosition.getLocation(function(e){varcurrentCenter=newqq.maps.LatLng(e.lat,e.lng)self.marker.setPosition(currentCenter)self.center=currentCenterself.map.setCenter(currentCenter)},function(e){alert(JSON.stringify(e))})}},created:function(){},mounted:function(){}});</script><style>#app{display:flex;height:100%;width:100%;flex-direction:column;flex-wrap:wrap;}.content{margin-left:12px;margin-right:12px;}#maps{width:100%;height:400px;display:block;position:relative;}</style></html>
