zoukankan      html  css  js  c++  java
  • 百度地图开发之点击地图给该位置添加标注(图标)并弹出对应的位置

    1.首先要引入自己的ak

      

            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx"></script>
    

    2.在html中写出地图的挂载点

     

            <div id="sitePersonMap"></div>
    

      

    3.百度地图JS 的API

                var map = new BMap.Map("sitePersonMap");                //new 一个地图对象  
                var point=new BMap.Point(121.770944, 31.107101);        //设置地图的中心点
                var zoom=16;                                            //设置地图的等级
                map.centerAndZoom(point, zoom);                         // 在地图中显示
                map.enableScrollWheelZoom();                 //启用滚轮放大缩小
                map.enableContinuousZoom();         //启用地图惯性拖拽,默认禁用
                var geoc = new BMap.Geocoder();  
                map.addEventListener("click",function(e){    //给地图添加点击事件
                    map.clearOverlays();                    
                    console.log(e);
                    var lng=e.point.lng;
                    var lat=e.point.lat;
                    //创建标注位置
                    var pt = new BMap.Point(lng, lat);
                    var myIcon = new BMap.Icon("./img/icon_address.png", new BMap.Size(100,100));
                    var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    	            map.addOverlay(marker2);              // 将标注添加到地图中
                    //alert(e.point.lng + "," + e.point.lat);
                    geoc.getLocation(pt, function(rs){
                        var addComp = rs.address;
                        alert("当前位置是:"+addComp);
                        console.log(rs)
                    });   
                });
    

      

  • 相关阅读:
    JS实战 · 表单验证
    JS实战 · 仿css样式选择器
    JS实战 ·  收缩菜单表单布局
    cookie自动登录的实现
    redis 3.2.5单机版安装、使用、systemctl管理Redis启动、停止、开机启动
    yum问题解决
    配置yum镜像源
    shell笔记
    CCIE总结:路由器、交换机
    云主机如何挂在磁盘
  • 原文地址:https://www.cnblogs.com/banyuege/p/9877217.html
Copyright © 2011-2022 走看看