百度地图创建标记点

最新推荐文章于 2023-07-07 15:10:38 发布

闻雨轩少爷

最新推荐文章于 2023-07-07 15:10:38 发布

阅读量4.1k

点赞数 1

本文链接：https://blog.csdn.net/yeyujiao8888/article/details/51330922

版权

项目需求：项目需要从数据库加载数据到百度地图上，显示未标记点。

js代码如下：

//创建地图
function showMap(){   
    map = new BMap.Map("information_date",{minZoom:6,maxZoom:17}); // 创建地图实例
    map.centerAndZoom(city,14); // 初始化地图,设置中心点坐标和地图级别。
    map.enableScrollWheelZoom(true); //启用滚轮放大缩小 
    //向地图中添加缩放控件  
    var ctrlNav = new window.BMap.NavigationControl({  
        anchor: BMAP_ANCHOR_TOP_LEFT,  
        type: BMAP_NAVIGATION_CONTROL_LARGE  
    });  
    map.addControl(ctrlNav);  
    
    //向地图中添加比例尺控件  
    var ctrlSca = new window.BMap.ScaleControl({  
        anchor: BMAP_ANCHOR_BOTTOM_LEFT  
    });  
    map.addControl(ctrlSca); 
}

//地图上创建自定义覆盖物，显示信息
function showBusiness_hall(markerArr){  //marjerArr为数据库查询的数据
    // 创建图标对象
    var myIcon = new BMap.Icon(hall, new BMap.Size(36, 40), {//是引用图标的名字以及大小，注意大小要一样，hall：表示图片
        anchor: new BMap.Size(10, 30)//这句表示图片相对于所加的点的位置
    });
    var point = new Array(); //存放标注点经纬信息的数组    
    var marker = new Array(); //存放标注点对象的数组    
    for (var i = 0; i < markerArr.length; i++){
         var p0 = markerArr[i].longitude; //    
         var p1 = markerArr[i].latitude; //按照原数组的point格式将地图点坐标的经纬度分别提出来    
         var businesshallName = markerArr[i].businesshallName;//数据库数据
         var adress = markerArr[i].adress;//数据库数据
         point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点   
         marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记  
         var label = new BMap.Label(p0+p1,{offset:new BMap.Size(20,-10)});//设置lable标签
         map.addOverlay(marker[i]); //地图上呈现标记 
         marker[i].setIcon(myIcon);//放图标
         marker[i].setLabel(label);
         label.setStyle({    //给label设置样式，任意的CSS都是可以的
                  display:"none"
              });
        
         var content = "<p style=’font-size:12px;lineheight:1.8em;’>营业厅信息：" + businesshallName + "</br>地址：" + adress + "</br></p>";
         addClickHandler(content,marker[i]);//添加监听事件
    }
}

/**
 * 添加监听事件
 */
function addClickHandler(content,marker){
    marker.addEventListener("click",function(e){
        openInfo(content,e)
    });
}

/**
 * 创建信息窗口
 */
function openInfo(content,e){
    var opts = {  
            width: 250, //信息窗口宽度  
            height: 150, //信息窗口高度  
            title: "海润" //信息窗口标题  
        }
    var p = e.target;
    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
    map.openInfoWindow(infoWindow,point); //开启信息窗口
}

/**
 * 显示具体的位置,设置为中心点
 */
function showSpecificPostion(markerArr){
     var p0 = markerArr[0].longitude; //    
     var p1 = markerArr[0].latitude; //按照原数组的point格式将地图点坐标的经纬度分别提出来    
     map.centerAndZoom(new BMap.Point(p0, p1), 16);  // 初始化地图,设置中心点坐标和地图级别
     deletePoint(p0+p1);//删除该经纬度上的覆盖物
}

/**
 * 删除固定点的覆盖物
 */
function deletePoint(point){
    var allOverlay = map.getOverlays();
    for (var i = 0; i < allOverlay.length -1; i++){
        if(allOverlay[i].getLabel().content == point){
            map.removeOverlay(allOverlay[i]);
            return false;
        }
    }
}

/**
 * 清除地图所有覆盖物
 */
function delelctOverlay(){
    map.clearOverlays();     
}
/**
 * 地图图标跳动
 */
function showAnimation(marker){
    marker[0].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}

jsp代码如下：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>  
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>  
<script type="text/javascript">
	var path = "<%=request.getContextPath()%>";
	var hall = "<%=request.getContextPath()%>/common/my_resource/picture/hall.png";
</script>
</head>
<body style="height:100%; width:100%">
      <!-- 数据div -->
      <div id="information_date" ></div>
</body>

闻雨轩少爷

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度地图创建标记点

项目需求：项目需要从数据库加载数据到百度地图上，显示未标记点。js代码如下：//创建地图function showMap(){ map = new BMap.Map("information_date",{minZoom:6,maxZoom:17}); // 创建地图实例 map.centerAndZoom(city,14); // 初始化地图,设置中心点坐标和
复制链接

扫一扫