<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>騰訊地圖,拖拽標注獲取坐標</title> <style type="text/css"> *{ margin:0px; padding:0px; } body, button, input, select, textarea { font: 12px/16px Verdana, Helvetica, Arial, sans-serif; } p{ width:603px; padding-top:3px; overflow:hidden; } #container { width:603px; height:767px; } #mapcon { width:603px; height:767px; } </style> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script> <script> var init = function() { var map = new qq.maps.Map(document.getElementById("container"),{ center: new qq.maps.LatLng(39.916527,116.397128), zoom: 13 }); //綁定單擊事件添加參數 qq.maps.event.addListener(map, 'click', function(event) { alert('您點擊的位置為: [' + event.latLng.getLat() + ', ' + event.latLng.getLng() + ']'); }); var anchor = new qq.maps.Point(6, 6), size = new qq.maps.Size(24, 24), origin = new qq.maps.Point(0, 0), icon = new qq.maps.MarkerImage('http://lbs.qq.com/javascript_v2/img/center.gif', size, origin, anchor); var marker = new qq.maps.Marker({ icon: icon, map: map, Draggable:true, position:map.getCenter()}); qq.maps.event.addListener(marker, 'dragend', function() { var weizhi = marker.getPosition(); map.setCenter(weizhi); console.log(weizhi.lat); console.log(weizhi.lng); }); } </script> </head> <body onload="init()"> <div id="container"></div> <p>給地圖綁定了點擊事件，當點擊地圖時，會彈出點擊點的坐標。</p> </body> </html>