騰訊地圖Api 實現拾取座標功能示例

原創

2020-05-31 21:08

一、註冊Api賬號，引用js庫

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=使用自己的"></script>

二、編寫座標拾取js代碼和html代碼

//按鈕定義
<div class="form-group">
    <label class="col-md-2 control-label"><span class="text-danger">*</span>座標：</label>
    <div class="col-md-3">
        <div class="input-group">
            <span class="input-group-addon">經度</span>
            <input class="form-control" type="number" ng-model="entity.Longitude" required />
        </div>
    </div>
    <div class="col-md-3">
        <div class="input-group">
            <span class="input-group-addon">緯度</span>
            <input class="form-control" type="number" ng-model="entity.Latitude" required />
        </div>
    </div>
    <div class="col-md-3">
        <span class="btn btn-link" ng-click="mapShow()">點擊座標拾取</span>
    </div>
</div>
//彈出框定義
<div id="mapModal" class="modal fade" tabindex="-1" role="dialog"
        data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">拖動位置標記設置座標</h4>
            </div>
            <div class="modal-body">
                <div id="mapContainer" style="min-width:500px;min-height:500px;"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">確定</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

js代碼示例

//選擇座標處理
var map;
var marker;
var init = function () {
    var center = new qq.maps.LatLng(39.916527, 116.397128);
    map = new qq.maps.Map(document.getElementById('mapContainer'), {
        center: center,
        zoom: 13
    });
    //獲取城市列表接口設置中心點
    citylocation = new qq.maps.CityService({
        complete: function (result) {
            map.setCenter(result.detail.latLng);
            //添加標記
            marker= new qq.maps.Marker({
                position: result.detail.latLng,
                draggable: true,
                map: map
            });
            //添加到提示窗
            var info = new qq.maps.InfoWindow({
                map: map
            });
            qq.maps.event.addListener(marker, 'mouseup', function (e) {
                //獲取經緯度 e.latLng
                //獲取座標 e.cursorPixel
                info.open();
                info.setContent('<div style="text-align:center;white-space:nowrap;' +
                    'margin:10px;">座標：' + e.latLng.lat + ',' + e.latLng.lng + '</div>');
                info.setPosition(e.latLng);

                $scope.entity.Longitude = e.latLng.lng;
                $scope.entity.Latitude = e.latLng.lat;
                $scope.$apply();
            });
        }
    });
    //調用searchLocalCity();方法    根據用戶IP查詢城市信息。
    citylocation.searchLocalCity();
}
init();

$scope.mapShow = function () {
    $('#mapModal').modal('show');
    if ($scope.entity.Latitude != undefined) {
        var point = new qq.maps.LatLng($scope.entity.Latitude, $scope.entity.Longitude);
        map.setCenter(point);
        marker.setPosition(point);
    }
}

三、添加或修改時座標對應截圖