【騰訊地圖】騰訊地圖定位解析

記一次騰訊地圖使用經驗(程式碼片段)

實現的功能：

       輸入位置-> 地圖marker定位到該位置

       點選地圖marker定位 -> 解析位置填充到輸入框

 

首先引入api

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=這裡寫你的key"></script>

初始化

init () {
    // 起始位置資料  this.longitude = 39.916527, this.latitude = 116.397128;
    this.myLatLng = new qq.maps.LatLng(this.longitude, this.latitude);
    const myOptions = {
        zoom: 10,
        center: this.myLatLng,
        mapTypeId: qq.maps.MapTypeId.ROADMAP,
    };
    // 初始化map
    this.map = new qq.maps.Map(document.getElementById('new-map'), myOptions);
    this.map.panTo(this.myLatLng);
    // 監聽地圖點選事件
    this.ListeningMapClick();
    // 初始化marker
    this.marker = new qq.maps.Marker({
        position: this.myLatLng,
        map: this.map,
    });
    this.marker.setPosition(this.myLatLng);
    // 初始化geocoder
    this.geocoder = new qq.maps.Geocoder();
}

監聽點選事件，解析點選位置地址

ListeningMapClick() {
    qq.maps.event.addListener(this.map, 'click', event => {
        if (!this.marker) {
            this.marker = new qq.maps.Marker({
                position: event.latLng,
                map: this.map,
            });
        }
        // marker定位到點選位置
        this.marker.setPosition(event.latLng);
        // 轉換成地址資訊
        this.LatLng2address(event.latLng);
    });
}

經緯度解析地址

LatLng2address(latLng) {
    const { geocoder } = this;
    geocoder.getAddress(latLng);
    geocoder.setComplete(result => {
        this.addressValue = result.detail.address;
    });
    geocoder.setError( err => {
        Toast.info('解析地址出錯');
    });
},

位置解析經緯度 並且 marker定位到解析位置

address2LatLng(address, changeZoom = false) {
    const { marker, map, geocoder } = this;
    changeZoom && map.zoomTo(13);  // 地圖放大
    geocoder.getLocation(address);
    geocoder.setComplete(result => {
        const { lat, lng } = result.detail.location;
        this.latitude = lat;
        this.longitude = lng;
        marker.setPosition(new qq.maps.LatLng(lat, lng));
        map.panTo(new qq.maps.LatLng(lat, lng));
    });
    geocoder.setError(err => {
        Toast.info('解析錯誤，請輸入正確地址');
        this.addressValue = '';
    });
},