/td-map-picker

天地图坐标拾取器，支持小程序webview模式

Primary LanguageVue

天地图坐标拾取器

支持vue组件和小程序webview两种模式获取

vue 2.6

更新日志

0.1.27

  1. 添加热门城市参数

0.1.25

  1. 修复城市选择器的宽度

0.1.24

  1. 选择城市的时候，切换地图到城市中心点

0.1.23

  1. 添加城市选择器，方便快速切换搜索城市
  2. 添加字体控制参数
  3. 当有startLonlat点位的时候，显示一个不可拖动的定位点

0.1.22

  1. 修复绘制线路图时候路线不平滑的问题

0.1.20

  1. 添加showRoute显示路线配置

0.1.16

  1. 当用户选中搜索列表时，提交点位名称为搜索出来的兴趣点名称。
  2. 添加以兴趣点名称为提交优先名称参数和距离参数。

安装

npm install td-map-picker

引入并使用

注意：父元素必须要有尺寸，不然无法显示

<template>
  <div style="width:100vw;height:100vh;">
    <TdMapPicker v-model="value" :tk="mapkey"/>
  </div>
</template>

<script>
import {TdMapPicker} from 'td-map-picker'
// 引入地图key
import {mapkey} from '../key'

export default {
  name: 'App',
  components: {
    TdMapPicker
  },
  data(){
    return {
        mapkey,
        value:''
    }
  }
}
</script>

<style>
body {
    margin: 0;
}
</style>

参数说明

所有的props参数均可以通过url传入

属性 类型 说明 默认值
value string v-model绑定，只有在确定按钮点击后才提交input事件。值是一个逗号分割的lonLat字符串 无
coordType string 指定value的坐标系，支持gcj02、wgs84、bd09三种格式，请注意，当使用非wgs84的时候，反复提交会造成坐标误差累积偏离地点 wgs84
decimals number 坐标保持的精度 6
tk string 天地图key 无
minZoom number 最小缩放 3
maxZoom number 最大缩放 18
zoom number 默认缩放 12
hotTitle string 热门标题 热门搜索：
hotKeywords array 热门搜索词列表 ["学校", "小区"]
centerOffset array 地图中心视野偏移 [0, -0.05]
offsetRateMaps object 根据zoom和偏移值系数计算视野中心 默认在常见手机尺寸下不需要修改
placeholder string 搜索框提示 请输入关键词搜索或移动定位点
noData string 无数据提示 暂无数据，请搜索关键词。
color string 主颜色 #1890ff
fontSize string 输入框和选择的字体 0.95rem
mode string 模式，可选项：webview 小程序webview模式，提交后，返回到小程序里面；picker 选择模式，提交后，返回到父组件 picker
startLonlat string 开始坐标字符串，用逗号分割lon,lat，如果传入了这个，将会返回距离 无
showRoute boolean 是否显示路线 false
drivingPolicy number 计算距离和线路的策略:0=最少时间、1=最短距离、2=避开高速、3=步行 1
defaultHide boolen 引入时是否收起信息框 false
debug boolen 是否开启调试模式，调试模式会console.log输出一些信息，如果在小程序中，需要在webview层再集成vconsole组件。 false
usePoi boolen 选中地图或者提交的时候，是否以就近兴趣点作为地点名称 false
poiDistance number 以兴趣点作为名称时，参考距离，如果大于这个距离就使用地址作为名称 30
showCity boolen 是否显示城市选择器 true
hotCitys array 热门城市列表 ["上海市","北京市"]

事件

事件 参数 说明
submit Object 下方详细说明 当用户选中了点位之后提交出来的数据

submit 数据说明

key 类型 说明
name string 点位的名字
address string 点位的地址
coordType string 当前lonlat的坐标系
lonlat string 点位的坐标
addressComponent object 点位逆地址解析数据
startLonlat string 如果传入了startLonlat，提交的时候回传回来
distance number 如果有startLonlat和当前点位的距离，单位千米
duration number 如果有startLonlat和当前点位的常规行车时长
routes object 如果有startLonlat和当前点位的线路

小程序webview模式

<template>
	<view>
		<web-view :src="currentUrl" @message="onMessage"></web-view>
	</view>
</template>

<script>
const host = 'http://192.168.0.55:8080/?mode=webview'
export default {
	data() {
		return {
			currentUrl: '',
			startLonlat: '',
			locationType: ''
		};
	},
	onLoad(options) {
		let url = host;
		this.locationType = options.locationType || 'start'
		if (options.startLonlat) {
			url = url + `&startLonlat=${options.startLonlat}`
		}
		if (options.value) {
			url = url + `&value=${options.value}`
		}
		this.currentUrl = url;
	},
	methods: {
		onMessage({ detail }) {
      // 在这个事件里接收提交数据
			console.log(detail, 'onMessage')
			if (detail.data) {
				const data = detail.data[0]
				this.$store.dispatch('order/SET_ORDER_POINT', { data, type: this.locationType })
			}

		}
	}
}
</script>