百度地图显示标识点

最新推荐文章于 2021-06-04 10:01:32 发布

淡乄然

最新推荐文章于 2021-06-04 10:01:32 发布

阅读量4k

点赞数

分类专栏： java 文章标签：百度地图

本文链接：https://blog.csdn.net/hcwbr123/article/details/77895467

版权

java 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

现象：
调用百度地图显示多个标识点

方法：
（1）：
这里写图片描述

页面的详细展示：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>执行打卡页面</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
</head>
<style type="text/css">
    body{font-size:14px;}
    .mui-content table{
        color: #555555;
        margin:10px auto;
        border-collapse: collapse;
    }
    .mui-content tr{line-height:30px;}
    .mui-content,body {
        background:#ffffff;
    }
    .BMap_cpyCtrl {  //隐藏地图下面的超链接
        display:none;
    }
    .anchorBL{
        display:none;
    }
    .demo_main { padding: 0px; padding-top: 0px;}  
    .demo_title { padding: 0px; margin-bottom: 0px; background-color: #D3D8E0;text-align:center;}  
    .demo_content { padding: 0px; margin-bottom: 0px;}  
</style>
<body>
<div class="mui-content" style="padding: 10px; margin-top: 60px;">
    <div id="map-layout">
        <div class="demo_main">  
            <fieldset class="demo_title">  
                当前位置
            </fieldset> 
            <fieldset class="demo_content">  
                <div style="min-height: 300px;" id="map"></div>
            </fieldset>
        </div>
    </div>
</div>
<script src="../../js/mui.min.js"></script>
    var markerArr=new Array;
    mui.toast("正在获取当前位置,请稍后！");
    //获取地址方法
    function onPlusReady() {
        plus.geolocation.getCurrentPosition( successGetAddress, function(e){mui.toast("获取地址信息失败！！！点击右上角刷新")});
    }

    //成功获取地址信息函数
    function successGetAddress(p){
        var adds=document.getElementById('address')
        var po;
        if(p.address.poiName==undefined){
            po="附近";
        }else{
            po=p.address.poiName+"附近";
        }
        var adds=p.address.province+p.address.city+p.address.district+p.address.street+po
        markerArr = [{ title: "时间", points:p.coords.longitude+","+p.coords.latitude, address:adds, time:(new Date()).Format("yyyy-MM-dd hh:mm:ss") }]; 
        mui.toast("地址获取成功");
        map_load();
    }

    //刷新地址的方法
    document.getElementById("refresh").addEventListener('tap',function(){
        onPlusReady();
    })

    var map; //Map实例
    function map_init() {  
        map = new BMap.Map("map");  
        //设置地图中心点
        if(markerArr.length>0){
            var s=markerArr[0].points.split(",")[0];
            var d=markerArr[0].points.split(",")[1];
            var point = new BMap.Point(s,d);  
        }else{
            var point = new BMap.Point(114.110951,22.542484);  
        }
        //初始化地图,设置地图大小级别。  
        map.centerAndZoom(point, 13);  
        //启用滚轮放大缩小  
        map.enableScrollWheelZoom(true);  
        //向地图中添加缩放控件  
        var ctrlNav = new window.BMap.NavigationControl({  
            anchor: BMAP_ANCHOR_TOP_LEFT,  
            type: BMAP_NAVIGATION_CONTROL_LARGE  
        });  
        map.addControl(ctrlNav);  
        //向地图中添加缩略图控件  
        var ctrlOve = new window.BMap.OverviewMapControl({  
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,  
            isOpen: 1  
        });  
            map.addControl(ctrlOve);  
        //向地图中添加比例尺控件  
        var ctrlSca = new window.BMap.ScaleControl({  
            anchor: BMAP_ANCHOR_BOTTOM_LEFT  
        });  
        map.addControl(ctrlSca);  
        //绘制点    
        for (var i = 0; i < markerArr.length; i++) {  
            var p0 = markerArr[i].points.split(",")[0];  
            var p1 = markerArr[i].points.split(",")[1];  
            var index = i;
            plus.maps.Map.convertCoordinates(new plus.maps.Point(p0,p1), {},function successCallback(event){ //将第三方坐标系坐标转换成当前地图的坐标系坐标
                var pointb = event.coord;       //转换后的坐标值
                var maker = addMarker(new window.BMap.Point(pointb.longitude, pointb.latitude));  
                addInfoWindow(maker, markerArr[index]);   
            }, function errorCallback(e){
                mui.toast('地址获取异常！');
            } );
        }  
    }  

    // 添加标注  
    function addMarker(point, index) { 
        var marker = new BMap.Marker(point); 
        map.addOverlay(marker); 
        return marker; 
    } 
    // 添加信息窗口  
    function addInfoWindow(marker, poi) {  
        //pop弹窗标题  
        var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title+":"+poi.time + '</div>';  
        //pop弹窗信息  
        var html = [];  
        html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');  
        html.push('<tr>');  
        html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');  
        html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');  
        html.push('</tr>');  
        html.push('</tbody></table>');  
        var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });  
            marker.openInfoWindow(infoWindow);
            var openInfoWinFun = function () {  
                marker.openInfoWindow(infoWindow);  
            };  
            marker.addEventListener("click", openInfoWinFun);  
        }  

    //异步调用百度js  
    function map_load() {  
        var load = document.createElement("script");  
        load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";  
        document.body.appendChild(load);  
    }  
</script>
</body>
</html>

淡乄然

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图显示标识点

现象：调用百度地图显示多个标识点方法：（1）：页面的详细展示：html>head>meta charset="UTF-8">title>执行打卡页面title>meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-s
复制链接

扫一扫