# 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。

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

//根据实际路径引入

//uni-app
import QQMapWX from '@/libs/qqmap-wx-jssdk.min.js'

//微信小程序
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。

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

//根据实际路径引入

//uni-app
import QQMapWX from '@/libs/qqmap-wx-jssdk.min.js'

//微信小程序
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)。

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

//根据实际路径引入

//uni-app
import amap from '@/libs/amap-wx.js'

//微信小程序
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)
	}
})