腾讯地图点击地图创建锚点（且只创建一个）同事创建锚点提示
程序员文章站
2023-10-27 22:50:04
腾讯地图点击地图创建锚点（且只创建一个）同事创建锚点提示。
qq.maps.event.addListener(marker, 'click', function() {
44 info.open();
45 info.setContent('单击标记');
47... ......
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>