# tui-maps 地图

介绍

maps:部分地图示例的使用说明,更多功能请查看ThorUI示例地图

# 拖拽定位

主要实现思路:当地图视野发生变化时获取地图中心点位置。以下为部分代码片段,具体实现请参考 示例程序 (opens new window)

引入map组件,map组件具体使用请参考 官方文档 (opens new window)

regionchange 事件:视野发生变化时触发。

<!--uni-app-->
<map id="maps" class="tui-maps" :longitude="longitude" :latitude="latitude" :scale="16" show-location @regionchange="regionchange"
 :style="{height:winHeight}">
	<cover-image class="cover-image" src="/static/images/maps/location.png" />
	<cover-image src="/static/images/maps/current.png?v=1" class="tui-current__img" @tap="currentLocation"></cover-image>
</map>

<!--微信小程序-->
<map id="maps" longitude="{{longitude}}" latitude="{{latitude}}" scale="16"  show-location  bindregionchange="regionchange">
  <cover-image class="cover-image"  src="/static/images/maps/location.png" />
</map>

特别说明

由于 regionchange 事件不支持App端,所以App端使用5+ api实现,代码如下:

onReady() {
	// #ifdef APP-PLUS
	if (!this.mapCtx) {
		this.mapCtx = uni.createMapContext("maps");
	}
	this.mapObj = this.mapCtx.$getAppMap();
	this.mapObj.onstatuschanged = (e) => {
		// 地图发生变化的时候,获取中间点,也就是cover-image指定的位置
		if (this.longitude != 114.010857) {
			this.address = "正在获取地址...";
			this.mapCtx.getCenterLocation({
				type: 'gcj02',
				success: (res) => {
					this.current_long = res.latitude;
					this.current_lat = res.longitude;
					this.getAddress(res.longitude, res.latitude);
				}
			})
		}
	}
	// #endif
}

# 周边兴趣点

引入js库 qqmap-wx-jssdk.min.js ,首先确保已经申请腾讯地图应用key。

以下仅为部分介绍说明,具体使用请参考示例程序。

//根据实际路径引入
const QQMapWX = require('../../../libs/qqmap-wx-jssdk.min.js');
//初始化
onLoad(options) {
	this.qqmapsdk = new QQMapWX({
		key: 应用KEY
	});
}
主要API方法说明

search :地点搜索(search接口),具体文档 传送门 (opens new window)

特别说明

由于 H5端API涉及跨域问题,所以项目中使用jsonp的方式去实现。

具体使用请参考示例程序。

# 地址解析

引入js库 qqmap-wx-jssdk.min.js ,首先确保已经申请腾讯地图应用key。

以下仅为部分介绍说明,具体使用请参考示例程序。

//根据实际路径引入
const QQMapWX = require('../../../libs/qqmap-wx-jssdk.min.js');
//初始化
onLoad(options) {
	this.qqmapsdk = new QQMapWX({
		key: 应用KEY
	});
}

# 根据位置获取经纬度

let that = this;
that.qqmapsdk.geocoder({
	address: that.cityName,
	success: function(res) {
		console.log(res)
		let latitude= res.result.location.lat;
		let longitude= res.result.location.lng;
	}
})

# 根据经纬度获取位置

this.qqmapsdk.reverseGeocoder({
	location: {
		latitude: latitude,
		longitude: longitude
	},
	success: function(res) {
		let city = res.result.address_component.city;
	}
})

特别说明

由于 H5端API涉及跨域问题,所以项目中使用jsonp的方式去实现。

具体使用请参考示例程序。

# 天气

引入js库 amap-wx.js ,首先确保已经高德地图应用key,具体文档 传送门 (opens new window)

以下仅为部分介绍说明,具体使用请参考示例程序。

//根据实际路径引入
const amap = require('../../../libs/amap-wx.js')
//初始化
onLoad(options) {
	this.amapPlugin = new amap.AMapWX({
		key: this.key
	})
}
//获取天气信息
this.amapPlugin.getWeather({
	success: (data) => {
		//成功回调
		console.log(data)
	},
	fail: function(info) {
		//失败回调
		console.log(info)
	}
})

# 预览

请以移动端效果为准,部分API尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码