一、注冊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.cursorPixelinfo.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);} }

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

?

更多：

常用電子面單接口對接技術文檔_菜鳥_快遞鳥

爬取Ip地址對應的物理位置等信息-百度服務器

新浪微博登陸，獲取微博用的信息

總結

以上是生活随笔為你收集整理的腾讯地图Api 实现拾取坐标功能示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。