|
|
@@ -0,0 +1,212 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view style="position: relative;" id="container">
|
|
|
+ <view class="loader"></view>
|
|
|
+ <view style="width: 100%; height: calc(50vh - 0rpx)" id="mapModule" :prop="nearCabinetList"
|
|
|
+ :change:prop="mapModule.update" :change:markersIcon='mapModule.markersIcon'
|
|
|
+ :change:markersIconActive='mapModule.markersIconActive' :markersIcon='markersIcon'
|
|
|
+ :markersIconActive='markersIconActive' :lngLat="myLocation" :change:lngLat="mapModule.initAmap"></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script module="mapModule" lang="renderjs">
|
|
|
+ var common = require("@/common/common.js");
|
|
|
+ var transform = require('../../common/transform.js');
|
|
|
+ var meMarker = []
|
|
|
+ var polylinePath = null
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ infoWindow: {},
|
|
|
+ selectedMarker: null,
|
|
|
+ defaultIcon: {},
|
|
|
+ selectedIcon: {},
|
|
|
+ markerData: {},
|
|
|
+ markersIcon: '',
|
|
|
+ markersIconActive: '',
|
|
|
+ ownerInstance: null,
|
|
|
+ map: {},
|
|
|
+ receiveTraceDate: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initAmap(lngLat, _, ownerInstance) {
|
|
|
+ console.log('213123123123')
|
|
|
+ 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
|
|
|
+
|
|
|
+ // script.src ='https://map.gpsall.cc/maps/api/js?key=AIzaSyA70JUgslynjmVv0NPz3hcvkTbPZpr2i_c&callback=initMap&v=weekly'
|
|
|
+ const script = document.createElement('script')
|
|
|
+ script.src =
|
|
|
+ 'https://map.gpsall.cc/maps/api/js?key=AIzaSyA70JUgslynjmVv0NPz3hcvkTbPZpr2i_c&callback=initMap&v=weekly&loading=async';
|
|
|
+ script.async = true; // 异步加载
|
|
|
+ script.defer = true; // 延迟执行
|
|
|
+ document.head.appendChild(script)
|
|
|
+ window.initMap = function() {
|
|
|
+ _this.loadAmap(lngLat)
|
|
|
+ };
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ 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))
|
|
|
+ },
|
|
|
+
|
|
|
+ loadAmap(lngLat) {
|
|
|
+
|
|
|
+ let _this = this
|
|
|
+ var myOptions = {
|
|
|
+ center: {
|
|
|
+ lat: parseFloat(lngLat.latitude),
|
|
|
+ lng: parseFloat(lngLat.longitude)
|
|
|
+ },
|
|
|
+ gestureHandling: "greedy", // 强制单指拖动
|
|
|
+ fullscreenControl: false,
|
|
|
+ draggable: true, // 显式启用拖拽
|
|
|
+ zoom: 14,
|
|
|
+ panControl: false,
|
|
|
+ zoomControl: false,
|
|
|
+ scaleControl: false,
|
|
|
+ streetViewControl: false,
|
|
|
+ mapTypeControl: false,
|
|
|
+ clickableIcons: false,
|
|
|
+ }
|
|
|
+ // 在初始化时定义图标配置（确保路径正确）
|
|
|
+ _this.defaultIcon = {
|
|
|
+ url: _this.markersIcon, // 默认图标路径
|
|
|
+ size: new google.maps.Size(50, 52),
|
|
|
+ scaledSize: new google.maps.Size(50, 52)
|
|
|
+ };
|
|
|
+
|
|
|
+ _this.selectedIcon = {
|
|
|
+ url: _this.markersIconActive, // 选中图标路径
|
|
|
+ size: new google.maps.Size(50, 52),
|
|
|
+ scaledSize: new google.maps.Size(50, 52)
|
|
|
+ };
|
|
|
+ // 存储当前选中的 Marker
|
|
|
+ _this.selectedMarker = null;
|
|
|
+ _this.map = new google.maps.Map(document.getElementById("mapModule"), myOptions);
|
|
|
+
|
|
|
+ //地图绑定事件
|
|
|
+ new google.maps.event.addListener(_this.map, "click", function(event) {
|
|
|
+ _this.$ownerInstance.callMethod('bindTapMap')
|
|
|
+ });
|
|
|
+
|
|
|
+ _this.addMarkers(_this.$ownerInstance)
|
|
|
+ // console.log("render初始化数据")
|
|
|
+ _this.$ownerInstance.callMethod('loadInitData')
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ addMarkers(ownerInstance) {
|
|
|
+ this.Markers.map(item => {
|
|
|
+ this.AddMarker(item, ownerInstance)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ AddMarker(item, ownerInstance) {
|
|
|
+ let _this = this
|
|
|
+ const marker = new google.maps.Marker({
|
|
|
+ id: item.id,
|
|
|
+ map: _this.map,
|
|
|
+ data: item,
|
|
|
+ position: new google.maps.LatLng(parseFloat(item.latitude), parseFloat(item.longitude)),
|
|
|
+ icon: this.defaultIcon,
|
|
|
+ zIndex: 20
|
|
|
+ });
|
|
|
+ marker.addListener('click', function(event) {
|
|
|
+ if (_this.selectedMarker) {
|
|
|
+ _this.selectedMarker.setIcon(_this.defaultIcon);
|
|
|
+ _this.selectedMarker.setOptions({ label: null });
|
|
|
+ }
|
|
|
+ marker.setIcon(_this.selectedIcon);
|
|
|
+ let distance = common.getFlatternDistance(_this.myLocation.longitude, _this.myLocation
|
|
|
+ .latitude, item.longitude, item.latitude)
|
|
|
+ let time = Math.ceil(Number(((distance - 0) / 1000).toFixed(2)) * 25 / 10)
|
|
|
+ let content = `${common.formatDistance(Number(distance))} 骑行${time}分钟`
|
|
|
+ marker.setOptions({
|
|
|
+ label: {
|
|
|
+ text: content,
|
|
|
+ className: "map-label",
|
|
|
+ }
|
|
|
+ })
|
|
|
+ _this.selectedMarker = marker;
|
|
|
+ _this.loadMarkertap(marker)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ update(newValue, _, ownerInstance) {
|
|
|
+ this.Markers = newValue
|
|
|
+ },
|
|
|
+
|
|
|
+ loadMarkertap(marker) {
|
|
|
+ let markerId = marker.data.markerId
|
|
|
+ if (markerId == 5000) return
|
|
|
+ this.$ownerInstance.callMethod('onMarkertap',marker.data)
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ nearCabinetList: {
|
|
|
+ type: Array,
|
|
|
+ required: true //必填项
|
|
|
+ },
|
|
|
+ myLocation: {
|
|
|
+ type: Object,
|
|
|
+ required: true //必填项
|
|
|
+ },
|
|
|
+ markersIcon: {
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ markersIconActive: {
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ onMarkertap(marker) {
|
|
|
+ this.$emit('changMarkertap',marker)
|
|
|
+ },
|
|
|
+ bindTapMap() {
|
|
|
+ console.log('点击事件!')
|
|
|
+ },
|
|
|
+ loadInitData() {
|
|
|
+ console.log('初始化成功!')
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+
|
|
|
+</style>
|
郭宇琦