jobslink-user-clent/components/sylj-selectLocation/seeLocation.vue

<template>
    <view class="waper">
        <view id="mapDiv2" class="mapDiv2" :prop="option" :change:prop="Trenderjs.updateEcharts"></view>
    </view>
</template>

<script>
    const dataCityList = require('./data.json')
    export default {
        name: 'SelectSeeLocation',
        data() {
            return {
                lat: '',
                lon: '',
                option: {
                    lng: '',
                    lat: '',
                    apikey: ''
                }
            }
        },
        props: {
            apikey: {
                type: String,
                default: ''
            }
        },
        mounted() {

        },
        methods: {
            open(city, keyword) {
                that.isshow = true
                const item = dataCityList.filter((item) => item.label === city)
                if (!item.length) {
                    uni.showToast({
                        title: '未查到地图信息'
                    })
                    return
                }
                // that.lng = e
                // that.lat = f
                // that.option = {
                //     lng: e,
                //     lat: f,
                //     apikey: g
                // }
                //     var that = this;
                //     let params = {
                //         postStr: {
                //             "keyWord": keyword,
                //             "queryType": 12,
                //             "start": 0,
                //             "count": 10,
                //             "specify": this.city.value
                //         },
                //         type: 'query',
                //         tk: this.apikey,
                //     }
                //     uni.showLoading({
                //         mask: true
                //     })
                //     uni.request({
                //         url: 'http://api.tianditu.gov.cn/v2/search',
                //         method: 'GET',
                //         data: params,
                //         success: res => {
                //             if (res.data.status.infocode === 1000) {
                //                 const {
                //                     pois: aPoints,
                //                     count
                //                 } = res.data
                //                 if (count === '0' || !aPoints || !aPoints.length) {
                //                     uni.showToast({
                //                         title: '没有找到该地址',
                //                         icon: 'none',
                //                         mask: false,
                //                     });
                //                     return
                //                 }
                //                 const {
                //                     pois,
                //                     keyWord,
                //                     lonlat
                //                 } = aPoints[0]
                //                 const values = aPoints.map((item) => this.formatterAdressLocation(item, 2))
                //                 that.arr_list = values
                //                 const [lon, lat] = lonlat.split(',')
                //                 this.setIcon(new T.LngLat(lon, lat), true)
                //                 this.changeCenter(lon, lat)
                //             } else {

                //             }
                //         },
                //         fail: () => {
                //             //console.log('获取失败')
                //         },
                //         complete: () => {
                //             uni.hideLoading();
                //         }
                //     });
            }
        }
    }
</script>

<style scoped>
    .waper {
        width: 100%;
        height: 100%;
    }
</style>


<script module="Trenderjs" lang="renderjs">
    const iconPath = require('./xwz_dw.png')
    let Tmap
    export default {
        data() {
            return {
                isinit: false,

            }
        },
        mounted(e) {
            if (typeof window.T === 'function') {
                //this.initEcharts()
            } else {
                ////console.log('init00')
                if (this.option && this.option.apikey) {
                    const script = document.createElement('script')
                    // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
                    script.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=' + this.option.apikey
                    script.onload = this.initEcharts.bind(this)
                    document.head.appendChild(script)
                }
            }
        },
        methods: {
            updateEcharts(newValue, oldValue, ownerInstance, instance) {
                // 监听 service 层数据变更
                ////console.log(9999)
                ////console.log(newValue)
                ////console.log(oldValue)
                if (this.option.apikey) {

                    const script = document.createElement('script')
                    script.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=' + this.option.apikey

                    script.onload = this.initEcharts.bind(this)
                    document.head.appendChild(script)
                }
            },
            initEcharts() {
                var that = this;
                //return
                ////console.log(window.T)
                Tmap = new T.Map('mapDiv', {
                    projection: 'EPSG:4326',
                    minZoom: 10,
                    maxZoom: 20,
                    zoom: 12,
                });
                // console.log(this.option)
                // console.log('init')
                Tmap.centerAndZoom(new T.LngLat(that.option.lng, that.option.lat), 17);
                //Tmap.removeEventListener("moveend");
                this.setIcon(new T.LngLat(that.option.lng, that.option.lat))
                // Tmap.addEventListener("moveend", function(e) {
                //     ////console.log(e.target.getCenter().getLng() + "," + e.target.getCenter().getLat())
                //     that.$ownerInstance.callMethod('nijiexi', {
                //         lng: e.target.getCenter().getLng(),
                //         lat: e.target.getCenter().getLat(),
                //         apikey: that.option.apikey
                //     })
                // });
            },
            changeCenter(lng, lat) {
                Tmap.centerAndZoom(new T.LngLat(lng, lat), 17);
            },
            setIcon(position, isClear) {
                if (isClear) {
                    Tmap.clearOverLays()
                }
                const icon = new T.Icon({
                    iconUrl: iconPath,
                    iconSize: new T.Point(30, 30),
                    iconAnchor: new T.Point(30, 30),
                });
                const marker = new T.Marker(position, {
                    icon,
                });
                Tmap.addOverLay(marker);
            }
        }
    }
</script>

<style>

</style>