腾讯地图点击地图创建锚点(且只创建一个)同事…
2018-09-29 03:54:30来源:博客园 阅读 ()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 6 <title>传递事件参数</title> 7 <style type="text/css"> 8 *{ 9 margin:0px; 10 padding:0px; 11 } 12 body, button, input, select, textarea { 13 font: 12px/16px Verdana, Helvetica, Arial, sans-serif; 14 } 15 p{ 16 width:603px; 17 padding-top:3px; 18 overflow:hidden; 19 } 20 #container{ 21 min-width:600px; 22 min-height:767px; 23 } 24 </style> 25 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script> 26 <script> 27 function init() { 28 var map = new qq.maps.Map(document.getElementById("container"),{ 29 center: new qq.maps.LatLng(39.916527,116.397128), 30 zoom: 13 31 }); 32 //添加监听事件 获取鼠标单击事件 33 qq.maps.event.addListener(map, 'click', function(event) { 34 var marker=new qq.maps.Marker({ 35 position:event.latLng, 36 map:map 37 }); 38 //添加到提示窗 39 var info = new qq.maps.InfoWindow({ 40 map: map 41 }); 42 //获取标记的点击事件 43 qq.maps.event.addListener(marker, 'click', function() { 44 info.open(); 45 info.setContent('<div style="text-align:center;white-space:nowrap;'+ 46 'margin:10px;">单击标记</div>'); 47 info.setPosition(new qq.maps.LatLng(event.latLng.getLat(),event.latLng.getLng())); 48 }); 49 qq.maps.event.addListener(map, 'click', function(event) { 50 marker.setMap(null); 51 info.close(); 52 }); 53 }); 54 } 55 </script> 56 </head> 57 <body onload="init()"> 58 <div id="container"></div> 59 <p>给地图绑定了点击事件,当点击地图时,会在点击位置显示Marker。</p> 60 </body> 61 </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- JS简单实现点击按钮或文字显示遮罩层的方法 2019-12-17
- 前端下载图片 2019-08-14
- js鼠标点击特效,有关参数设置 2019-08-14
- Nuxt 2019-08-14
- 移动端点击按钮复制文本内容 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash