记录腾讯地图点击地图获取标注坐标

2018-11-21  本文已影响0人  夏侯不胖墩

<!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{

min-width:600px;

min-height:767px;

}

</style>

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

<script>

function init() {

    var map = new qq.maps.Map(document.getElementById("container"),{

        center: new qq.maps.LatLng(22.553147478403194, 114.049072265625),

        zoom: 13

    });

    //添加监听事件  获取鼠标单击事件

    qq.maps.event.addListener(map, 'click', function(event) {

      var marker=new qq.maps.Marker({

                position:event.latLng,

                map:map

          });   

                  alert('您点击的位置为: [' + event.latLng.getLat() + ', ' +

        event.latLng.getLng() + ']');

      qq.maps.event.addListener(map, 'click', function(event) {

            marker.setMap(null);     

    });

    });

}

</script>

</head>

<body onload="init()">

<div id="container" style="width: 500px;height: 500px;margin: 0 auto;"></div>

<p>给地图绑定了点击事件,当点击地图时,会在点击位置显示Marker。</p>

</body>

</html>

上一篇下一篇

猜你喜欢

热点阅读