位置:首页  >   前端编程  > 百度地图api已知坐标显示指定位置

百度地图api已知坐标显示指定位置

业务需求:已知景点的经纬度,在百度地图上显示该景点,并能进行一些简单的操作。
项目:旅游项目后台管理中管理员查看景点在地图中的位置,并能进行一些操作,来制定旅游线路!
基本使用过程:
1,注册百度的开发者账号
2.建立一个百度地图的应用得到ak
3.效果如图:
map-2.png


4.代码如下:
首先引入百度js,我这里用到了3
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MapWrapper/1.2/src/MapWrapper.min.js"></script>  
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox.js"></script>
js代码如下:
            //显示地图上的商品方法
            function onlyMap(object,index){
                    //alert(index);
                    var map = new BMap.Map("allmap"+index);            // 创建Map实例
                    //var map = new BMap.Map("allmap");            // 创建Map实例
                    map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
                    //可以转化gps坐标
                    var mapWforGPS = new BMapLib.MapWrapper(map, BMapLib.COORD_TYPE_GPS); 
                    for(var i=0;i<object.length; i++){
                        //添加gps坐标mkr
                        //var gpsMkr = new BMap.Marker(new BMap.Point(/*GPS坐标*/116.397428, 39.75923 + i * 0.01));
                            
                        var imgstr = '';
                        if(object['rootclass'] == 1){
                            imgstr = "<?php echo C('ADMIN_IMG_PATH');?>red.png";
                        }else if(object['rootclass'] == 2){
                            imgstr = "<?php echo C('ADMIN_IMG_PATH');?>yellow.png";
                        }else{
                            imgstr = "<?php echo C('ADMIN_IMG_PATH');?>blue.png";
                        }
                        
                        var myIcon = new BMap.Icon(imgstr, new BMap.Size(25,25));
                        var marker2 = new BMap.Marker(new BMap.Point(/*GPS坐标*/Number(object['lacode']), Number(object['locode'])),{icon:myIcon});  // 创建标注   
                            
                        (function(i){
                            marker2.addEventListener("click", function(e){
                            //注意button 会自动提交,改为<a>
                                var html =     
                                    '<div class="infoBoxContent">'
                                        +'<div class="title"><strong>'
                                        +object['goodsname']
                                        +'</strong></div>'
                                        +'<div class="list">       '
                                        +'地址: '
                                        +object['location']
                                        +'</div>'
                                        +'<div class="btncontent"><span class="sign">加入到:</span>'
                                        +'<a class="btn" href="javascript:void(0)" onclick="btnLine(this,'
                                        +index+','
                                        +object['id']
                                        +',\''
                                        +object['goodsname']
                                        +'\')">活动名称</a>'
                                        +'<a class="btn" href="javascript:void(0)" onclick="btnSleep(this,'
                                        +index+','
                                        +object['id']
                                        +',\''
                                        +object['goodsname']
                                        +'\')">住宿</a>'
                                        +'<a class="btn" onclick="btnMeal(this,'
                                        +index+','
                                        +object['id']
                                        +',\''
                                        +object['goodsname']
                                        +'\')">餐饮</a>'
                                        +'<span><a  class="remove" href="javascript:void(0)" onclick="removeFromInput(this,'
                                        +index
                                        +','
                                        +object['id']
                                        +')">  </a></span>'
                                        +'</div>'
                                    +'</div>';
                                
                                var infoBox = new BMapLib.InfoBox(map,html,{
                                    boxStyle:{
                                        //background:"url('tipbox.gif') no-repeat center top"
                                        background:" no-repeat center top"
                                        ,width: "350px"
                                        ,height: "180px"
                                    }
                                    ,closeIconMargin: "1px 1px 0 0"
                                    ,enableAutoPan: true
                                    ,align: INFOBOX_AT_TOP
                                });
                                infoBox.open(this);
    
                            });
                        })(i);
                        
                        //mapWforGPS.addOverlay(gpsMkr);
                        map.addOverlay(marker2);

                }   
                    map.enableScrollWheelZoom(); 
            }

0
文章属性
精彩评论