一、注冊(cè)Api賬號(hào)，引用js庫(kù)

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

二、編寫(xiě)坐標(biāo)拾取js代碼和html代碼

//按鈕定義 <div class="form-group"><label class="col-md-2 control-label"><span class="text-danger">*</span>坐標(biāo)：</label><div class="col-md-3"><div class="input-group"><span class="input-group-addon">經(jīng)度</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()">點(diǎn)擊坐標(biāo)拾取</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">拖動(dòng)位置標(biāo)記設(shè)置坐標(biāo)</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代碼示例

//選擇坐標(biāo)處理 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});//獲取城市列表接口設(shè)置中心點(diǎn)citylocation = new qq.maps.CityService({complete: function (result) {map.setCenter(result.detail.latLng);//添加標(biāo)記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) {//獲取經(jīng)緯度 e.latLng//獲取坐標(biāo) e.cursorPixelinfo.open();info.setContent('<div style="text-align:center;white-space:nowrap;' +'margin:10px;">坐標(biāo)：' + 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();});}});//調(diào)用searchLocalCity();方法 根據(jù)用戶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);} }

三、添加或修改時(shí)坐標(biāo)對(duì)應(yīng)截圖

?

更多：

常用電子面單接口對(duì)接技術(shù)文檔_菜鳥(niǎo)_快遞鳥(niǎo)

爬取Ip地址對(duì)應(yīng)的物理位置等信息-百度服務(wù)器

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。