zoukankan      html  css  js  c++  java
  • 【百度地图API】情人节求爱大作战——添加标注功能

     

    任务描述:

      2月2日是除夕,2月14立马来!即将到来的情人节,你想送TA一份什么礼物呢?

      不如,在你们居住的地方,画个大大的桃心,表达你对TA的爱意吧!  

     

    如何实现:

      给地图增加一个事件监听,addEventListener;

         当鼠标点击地图时,首先获取改点坐标,其次在改点坐标处增加一个红色标注。

     

    图示:

     

    运行代码,请点击这里

     

    代码如下:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>酸奶小妹——百度地图API学习</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=25f144bb4491f54b83a7a7b39198c11e&v=1.1&services=ture" ></script>
    <link rel="stylesheet" type="text/css" href="static/base.css" media="screen" />
    </head>
    <body>
    <div class="wrapper">
    <div class="header">
    <h1>新增marker</h1>
    <p><span class="f-r">2011-01-14</span>任务描述:</p>
    <p>鼠标点击地图,即可新增一个标注。</p>
    </div>
    <div class="container clearfix">
    <div id="mapBox" class="myMap f-l"></div>
    </div>
    <div class="info">
    <p>谷歌广告:</p>
    <div style="clear:both">
    <script type="text/javascript"><!--
    google_ad_client
    = "ca-pub-5845154460812025";
    /* 横幅728&#42;90 */
    google_ad_slot
    = "8606107205";
    google_ad_width
    = 728;
    google_ad_height
    = 90;
    //-->
    </script>
    <script type="text/javascript"
    src
    ="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>
    </div>
    <div class="footer">
    <span class="f-r">COPYRIGHT &copy; 酸奶小妹</span>
    <span>友情链接:
    <a target="_blank" href="http://openapi.baidu.com/map/index.html">百度地图API</a>|
    <a target="_blank" href="http://tieba.baidu.com/f?kw=%B0%D9%B6%C8%B5%D8%CD%BCapi&fr=tb0_search&ie=utf-8">百度地图API贴吧</a>|
    <a target="_blank" href="http://map.baidu.com/">百度地图</a>|
    <a target="_blank" href="http://www.cnblogs.com/milkmap/">酸奶小妹</a>
    </span>
    </div>
    </div>
    </body>

    <script type="text/javascript">
    var map = new BMap.Map("mapBox"); // 创建map
    var point = new BMap.Point(116.411053,39.950507); // 确定中心点
    map.centerAndZoom(point,16); // 初始化地图map,设置中心点和地图级别。

    map.addEventListener(
    "click", function (e) {
    point
    = new BMap.Point(e.point.lng, e.point.lat);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    });

    </script>
    </html>

     

  • 相关阅读:
    jquery map.js
    json序列指定名称
    如何将后台传来的json反序列化为前端具体对象
    创建随机码!!
    用户(三次)登录--作业小编完成
    求出1-2+3-4+5------100求和
    if -else 条件语句原理
    联系:中奖彩票小编译
    求出1-100内所有奇数。
    练习题:求1-100所有数偶数
  • 原文地址:https://www.cnblogs.com/milkmap/p/1937465.html
Copyright © 2011-2022 走看看