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>

     

  • 相关阅读:
    8.C++-类的关键字
    BFS-九宫格重排(详解)
    7.C++类与封装的概念
    4.数码相框-freetype多行显示,居中显示
    3.数码相框-通过freetype库实现矢量显示
    Linux-iconv命令、并批处理将所有GBK文件转换为UTF8(18)
    2.数码相框-编码(ASCII/GB2312/Unicode)介绍,并使LCD显示汉字字符(2)
    1.数码相框-相框框架分析(1)
    Kotlin 之操作符重载
    Andorid-解决View重复点击的思路
  • 原文地址:https://www.cnblogs.com/milkmap/p/1937465.html
Copyright © 2011-2022 走看看