【腾讯地图】录入经纬度功能 - 支持地图选点
目录
- 效果展示
- 代码
- 引入地图服务地址
- 弹框中输入框 - 支持手动输入经纬度/地图选点按钮
- 地图选点弹框组件
当前文章 - 地图功能与 https://blog.csdn.net/m0_53562074/article/details/143677335 功能类似
效果展示
代码
引入地图服务地址
public/index.html
<!-- 互联网地图 -->
<script src="https://map.qq.com/api/gljs?v=2.exp&key=自己申请的key"></script><!-- 如果有用到编辑器 new TMap.tools.GeometryEditor() ，地图服务地址上查询参数要加 libraries=tools -->
<!-- https://map.qq.com/api/gljs?libraries=tools&v=2.exp&key=自己申请的key -->
弹框中输入框 - 支持手动输入经纬度/地图选点按钮
已删除无关代码，只展示地图选点相关代码
<template><el-dialogv-if="dialogVisible"title="弹框展示选点":visible.sync="dialogVisible":show-close="true"width="700px":close-on-click-modal="false":close-on-press-escape="false":before-close="handleClose"append-to-body><!-- ... --><div class="position"><el-input v-model="formData.position" placeholder="请输入勤务地点" size="mini" /><i class="iconfont ico-dituxuanze" @click="setPosition" /></div><SetPointMap ref="SetPointMapRef" @updatePoint="updatePointHandler" /></el-dialog>
</template><script>
// ...
import SetPointMap from './SetPointMap'export default {name: 'ResultEntry',components: { SetPointMap },data() {return {// /...formData: {position: ''},dialogVisible: false}},methods: {// ...showDetail() {this.dialogVisible = true},setPosition() {const { position } = this.formDataconst arr = position.split(/,|，/)const pointer = {jd: arr[0],wd: arr[1]}this.$refs.SetPointMapRef.open(pointer)},updatePointHandler({ jd, wd }) {this.formData.position = `${jd},${wd}`},handleClose() {// ...// 关闭弹窗this.dialogVisible = false}}
}
</script>
<style lang="scss" scoped>
// ....position {display: flex;.el-input {flex: 1;margin-right: 10px;}.iconfont {cursor: pointer;}
}
</style>地图选点弹框组件
SetPointMap.vue
<!-- 地图选点 -->
<template><el-drawerv-if="drawerVisible"title="地图标注"size="65%"append-to-body:before-close="handleClose":visible.sync="drawerVisible"><div :id="idName" class="TMap" /></el-drawer>
</template><script>
import { mapGetters } from 'vuex'export default {name: 'SetPointMap',data() {return {drawerVisible: false,idName: 'setPointMap',map: null,multiMarker: null, // 点位图标point: {},clickPoint: {}}},computed: {...mapGetters(['sysConfigData'])},watch: {clickPoint: {handler(val) {if (val.jd) {this.$confirm(`确定标注以下经纬度吗？<br/> 经度 ${val.jd}<br/> 纬度 ${val.wd}`,'提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',dangerouslyUseHTMLString: true}).then((_) => {this.drawerVisible = falsethis.$emit('updatePoint', val)}).catch((_) => {this.$message.info('取消经纬度标注')this.clickPoint = {}})}}}},mounted() {this.initMap()},methods: {open(pointer) {this.drawerVisible = truethis.point = pointer // 保存初始经纬度},initMap() {var location = (this.sysConfigData.map_location || '121.427648,28.661939').split(',')this.map = new TMap.Map(this.idName, {zoom: this.sysConfigData.map_level || 14,center: new TMap.LatLng(Number(location[1]), Number(location[0]))})this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION) // 移除腾讯地图旋转控件this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM) // 移除腾讯地图缩放控件if (this.point.jd && this.point.wd) {// 将初始经纬度在地图上进行标点this.setPoint({ ...this.point }, true)}this.map.on('click', (e) => {// 点击地图获取经纬度this.removePoint() // 移除已有标点this.clickPoint = {jd: e.latLng.lat,wd: e.latLng.lng}// 点击位置进行标点this.setPoint({ ...this.clickPoint })})},setPoint({ jd, wd }, isSetCenter = false) {isSetCenter && this.map.setCenter(new TMap.LatLng(Number(jd), Number(wd)))this.MultiMarker = new TMap.MultiMarker({id: 'marker-layer',map: this.map,styles: {marker: new TMap.MarkerStyle({width: 25,height: 35,anchor: { x: 16, y: 32 }})},geometries: [{id: 'demo',styleId: 'marker',position: new TMap.LatLng(jd * 1, wd * 1),properties: {title: 'marker'}}]})},removePoint() {this.MultiMarker?.setMap(null)},handleClose(done) {this.$confirm('还有未保存的工作,确定关闭吗？').then((_) => {done()}).catch((_) => {})}}
}
</script><style lang='scss' scoped>
.TMap {width: 100%;height: 100%;
}::v-deep .el-drawer {.el-drawer__body {padding: 0;}
}
</style>