经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
腾讯地图点击地图创建锚点(且只创建一个)同事创建锚点提示
来源:cnblogs  作者:NickTong  时间:2018/9/30 10:57:09  对本文有异议
  1. 1 <!DOCTYPE html>
  2. 2 <html>
  3. 3 <head>
  4. 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. 6 <title>传递事件参数</title>
  7. 7 <style type="text/css">
  8. 8 *{
  9. 9 margin:0px;
  10. 10 padding:0px;
  11. 11 }
  12. 12 body, button, input, select, textarea {
  13. 13 font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
  14. 14 }
  15. 15 p{
  16. 16 width:603px;
  17. 17 padding-top:3px;
  18. 18 overflow:hidden;
  19. 19 }
  20. 20 #container{
  21. 21 min-width:600px;
  22. 22 min-height:767px;
  23. 23 }
  24. 24 </style>
  25. 25 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
  26. 26 <script>
  27. 27 function init() {
  28. 28 var map = new qq.maps.Map(document.getElementById("container"),{
  29. 29 center: new qq.maps.LatLng(39.916527,116.397128),
  30. 30 zoom: 13
  31. 31 });
  32. 32 //添加监听事件 获取鼠标单击事件
  33. 33 qq.maps.event.addListener(map, 'click', function(event) {
  34. 34 var marker=new qq.maps.Marker({
  35. 35 position:event.latLng,
  36. 36 map:map
  37. 37 });
  38. 38 //添加到提示窗
  39. 39 var info = new qq.maps.InfoWindow({
  40. 40 map: map
  41. 41 });
  42. 42 //获取标记的点击事件
  43. 43 qq.maps.event.addListener(marker, 'click', function() {
  44. 44 info.open();
  45. 45 info.setContent('<div style="text-align:center;white-space:nowrap;'+
  46. 46 'margin:10px;">单击标记</div>');
  47. 47 info.setPosition(new qq.maps.LatLng(event.latLng.getLat(),event.latLng.getLng()));
  48. 48 });
  49. 49 qq.maps.event.addListener(map, 'click', function(event) {
  50. 50 marker.setMap(null);
  51. 51 info.close();
  52. 52 });
  53. 53 });
  54. 54 }
  55. 55 </script>
  56. 56 </head>
  57. 57 <body onload="init()">
  58. 58 <div id="container"></div>
  59. 59 <p>给地图绑定了点击事件,当点击地图时,会在点击位置显示Marker。</p>
  60. 60 </body>
  61. 61 </html>

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号