谷歌地图接入

common/transform.js

@@ -0,0 +1,142 @@
+//转换常数
+const x_pi = 3.14159265358979324 * 3000.0 / 180.0
+const pi = 3.14159265358979324
+const a = 6378245.0
+const ee = 0.00669342162296594323
+
+function transformLon(x, y) {
+	var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+	ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+	ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
+	ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
+	return ret;
+}
+
+function transformLat(x, y) {
+	var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+	ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+	ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
+	ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
+	return ret;
+}
+// 判断是否在国内
+// function outOfChina(lat, lon) {
+// 	if (lon  137.8347)
+// 		return true;
+// 	if (lat  55.8271)
+// 		return true;
+// 	return false;
+// }
+
+function outOfChina(lat, lon) {
+	if (lon < 72.004 || lon > 137.8347)
+		return true;
+	if (lat < 0.8293 || lat > 55.8271)
+		return true;
+	return false;
+}
+
+/* 
+ WGS-84转换GCJ-02
+（即 天地图转高德、腾讯地图）
+ */
+export const wgs_gcj_encrypts = (latlon) => {
+	var point = [];
+	// for (const latlon of latlons) {
+	if (outOfChina(latlon.lat, latlon.lng)) {
+		// point.push({
+		// 	lat: latlon.lat,
+		// 	lng: latlon.lng
+		// })
+		return {
+			latitude: latlon.lat,
+			longitude: latlon.lng
+		}
+	}
+	var dLat = transformLat(latlon.lng - 105.0, latlon.lat - 35.0);
+	var dLon = transformLon(latlon.lng - 105.0, latlon.lat - 35.0);
+	var radLat = latlon.lat / 180.0 * pi;
+	var magic = Math.sin(radLat);
+	magic = 1 - ee * magic * magic;
+	var sqrtMagic = Math.sqrt(magic);
+	dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
+	dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
+	var lat = latlon.lat + dLat;
+	var lng = latlon.lng + dLon;
+	return {
+		latitude: lat,
+		longitude: lng
+	};
+}
+/* 
+ BD-09转换GCJ-02
+ （即 百度转高德、腾讯地图）
+ */
+export const bd_google_encrypt = (latlons) => {
+	var point = [];
+	for (const latlon of latlons) {
+		var x = latlon.lng - 0.0065;
+		var y = latlon.lat - 0.006;
+		var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
+		var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
+		var gg_lon = z * Math.cos(theta);
+		var gg_lat = z * Math.sin(theta);
+		point.push({
+			lat: gg_lon,
+			lng: gg_lat
+		})
+	}
+	return point;
+}
+/* 
+ GCJ-02转换BD-09
+ （即 高德、腾讯转百度地图）
+ */
+export const google_bd_encrypt = (latlons) => {
+	var point = [];
+	for (const latlon of latlons) {
+		var x = latlon.lng;
+		var y = latlon.lat;
+		var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
+		var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
+		var bd_lon = z * Math.cos(theta) + 0.0065;
+		var bd_lat = z * Math.sin(theta) + 0.006;
+		point.push({
+			lat: bd_lat,
+			lng: bd_lon
+		})
+	}
+	return point;
+}
+/* 
+ GCJ-02 到 WGS-84 的转换
+ （即 高德、腾讯转天地图）
+ */
+export const gcj_wgs_encrypts = (latlon) => {
+	// for (const latlon of latlons) {
+	if (outOfChina(latlon.lat, latlon.lng)) {
+		return {
+			latitude: latlon.lat,
+			longitude: latlon.lng
+		}
+	}
+	var dLat = transformLat(latlon.lng - 105.0, latlon.lat - 35.0);
+	var dLon = transformLon(latlon.lng - 105.0, latlon.lat - 35.0);
+	var radLat = latlon.lat / 180.0 * pi;
+	var magic = Math.sin(radLat);
+	magic = 1 - ee * magic * magic;
+	var sqrtMagic = Math.sqrt(magic);
+	dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
+	dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
+	var lat = dLat;
+	var lng = dLon;
+	return {
+		latitude: lat,
+		longitude: lng
+	}
+}
+
+module.exports = {
+	gcj_wgs_encrypts: gcj_wgs_encrypts,
+	wgs_gcj_encrypts: wgs_gcj_encrypts
+}

pages/batteryDetail/batteryDetail.vue

@@ -45,9 +45,12 @@
 </template>
 
 <script>
+	const http = require('../../common/request.js');
+	const config = require('../../common/config_gyq.js');
 	export default {
 		data() {
 			return {
+				list:[]
 			};
 		}
 		/**

pages/service/service.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="service-main">
-		<map @markertap='markertapFn' class="my_app" id="myMap" :longitude="myLocation.longitude"
+		<!-- <map @markertap='markertapFn' class="my_app" id="myMap" :longitude="myLocation.longitude"
 			:latitude="myLocation.latitude" :scale="18" show-location enable-3D show-compass enable-overlooking
 			:enable-satellite="false" :markers="markers" :polyline="polylines" :enable-traffic="false"
 			style="width: 100%; height: calc(50vh - 0rpx)">
@@ -9,7 +9,12 @@
 					{{ item.available_cnt }}
 				</cover-view>
 			</block>
-		</map>
+		</map> -->
+		<view id="container">
+			<view style="width: 100%; height: calc(50vh - 0rpx)" id="mapModule" :prop="nearShopList"
+				:change:prop="mapModule.update" :lngLat="renderLngLat" :change:lngLat="mapModule.initAmap"
+				:curLngLat="curLngLat" :change:curLngLat="mapModule.loadPanTo"></view>
+		</view>
 		<!-- 地图控件 -->
 		<cover-view :class="[
         'control-icon-view',
@@ -79,6 +84,11 @@
 	import {
 		LEASE_TYPE_ARR
 	} from '@/common/constant.js'
+	
+	var transform = require('../../common/transform.js');
+	var meMarker = []
+	var polylinePath = null
+	
 	const SHOPSELECTIMG = `https://qiniu.bms16.com/FkS7hjd6tl6ydLIi9-SQI0vGboMW`
 	const CABINET_ICON_URL =
 		"https://zxappfile.bms16.com/zx_client/shop_mark.png";
@@ -88,6 +98,9 @@
 	export default {
 		data() {
 			return {
+				curLngLat: {},
+				map:{},
+				nearShopList: [],
 				activeMarkersId: 0,
 				myLocation: {
 					latitude: 23.099994,
@@ -139,6 +152,136 @@
 		},
 
 		methods: {
+			moveToLocation: function() {
+				const that = this;
+				uni.getLocation({
+					// type: 'gcj02',
+					success: function(res) {
+						that.setData({
+							myLocation: {
+								longitude: res.longitude,
+								latitude: res.latitude
+							},
+							centerLocation: {
+								longitude: res.longitude,
+								latitude: res.latitude
+							},
+							curLngLat: {
+								time: new Date().valueOf(),
+								longitude: res.longitude,
+								latitude: res.latitude
+							}
+						});
+						storage.setUserCurrentLocation(that.myLocation);
+						that.mapCtx.moveToLocation();
+						that.setData({
+							showShopInfo: false,
+							isIcShow: false,
+							scale: 14
+						});
+					},
+					fail: function(res) {
+						console.log(res)
+						common.simpleToast(JSON.stringify(res));
+						// common.simpleToast(that.$t('获取地址失败，请授权重新打开'));
+					},
+					complete: function(res) {}
+				});
+			},
+			
+			initAmap(lngLat, _, ownerInstance) {
+				console.log('谷歌跑通')
+				lngLat = {
+					lat: lngLat.latitude,
+					lng: lngLat.longitude
+				}
+				lngLat = transform.wgs_gcj_encrypts(lngLat)
+				// lngLat = transform.gcj_wgs_encrypts(lngLat)
+				// console.log(lngLat, "坐标系lngLat")
+				let _this = this
+				const script = document.createElement('script')
+				script.src =
+					'https://map.gpsall.cc/maps/api/js?key=AIzaSyA70JUgslynjmVv0NPz3hcvkTbPZpr2i_c&callback=initMap&libraries=&v=weekly'
+				window.initMap = function() {
+					setTimeout(() => {
+						_this.loadAmap(lngLat)
+					}, 1500);
+				};
+				document.head.appendChild(script)
+			},
+			loadAmap(lngLat) {
+				let _this = this
+				var myOptions = {
+					center: {
+						lat: parseFloat(lngLat.latitude),
+						lng: parseFloat(lngLat.longitude)
+					},
+					zoom: 16,
+					panControl: false,
+					zoomControl: false,
+					scaleControl: false,
+					streetViewControl: false
+				}
+				_this.map = new google.maps.Map(document.getElementById("mapModule"), myOptions);
+				// const marker = new google.maps.Marker({
+				// 	position: {
+				// 		lat: parseFloat(lngLat.latitude),
+				// 		lng: parseFloat(lngLat.longitude)
+				// 	},
+				// 	icon: {
+				// 		url: "https://zxappfile.bms16.com/zx_client/red.png",
+				// 		scaledSize: new google.maps.Size(10, 10)
+				// 	},
+				// 	map: _this.map
+				// });
+				//地图绑定事件
+				new google.maps.event.addListener(_this.map, "click", function(event) {
+					_this.$ownerInstance.callMethod('bindTapMap')
+				});
+				console.log("render初始化数据")
+				_this.$ownerInstance.callMethod('loadInitData')
+			},
+			loadPanTo(lngLat, _, ownerInstance) {
+				lngLat = {
+					lat: lngLat.latitude,
+					lng: lngLat.longitude
+				}
+				console.log("lngLat", lngLat)
+				lngLat = transform.wgs_gcj_encrypts(lngLat)
+				console.log("lngLat", lngLat)
+			
+				this.map.panTo(new google.maps.LatLng(lngLat.latitude, lngLat.longitude))
+			},
+			update(newValue, _, ownerInstance) {
+				// console.log("newValue新数据")
+				// console.log(newValue)
+				// const _this = this
+				// _this.nearShopList = newValue
+				// for (var i = 0; _this.markersArray.length > i; i++) {
+				// 	_this.markersArray[i].setMap(null);
+				// }
+				// for (var i = 0; _this.nearShopList.length > i; i++) {
+				// 	var nearShop = _this.nearShopList[i]
+				// 	const marker = new google.maps.Marker({
+				// 		id: nearShop.id,
+				// 		map: _this.map,
+				// 		data: nearShop,
+				// 		title: "",
+				// 		position:new google.maps.LatLng( parseFloat(nearShop.latitude), parseFloat(nearShop.longitude)),
+				// 		icon: {
+				// 			url: nearShop.iconPath,
+				// 			size: new google.maps.Size(30, 32),
+				// 			scaledSize: new google.maps.Size(30, 32)
+				// 		},
+				// 		zIndex: 20
+				// 	});
+				// 	_this.markersArray.push(marker)
+				// 	google.maps.event.addListener(marker, 'click', (event) => {
+				// 		console.log(JSON.stringify(marker.data))
+				// 		_this.loadMarkertap(ownerInstance, marker.data)
+				// 	})
+				// }
+			},
 			markertapFn(e) {
 				let markerId = e.markerId
 				if (markerId == 5000) return