地图_百度在线地图基本呈现

最新推荐文章于 2021-05-31 12:24:59 发布

持之以恒_冬至

最新推荐文章于 2021-05-31 12:24:59 发布

阅读量598

点赞数

分类专栏： js学习与积累文章标签：百度地图 js

本文链接：https://blog.csdn.net/qq_25333005/article/details/79238165

版权

js学习与积累专栏收录该内容

4 篇文章 0 订阅

订阅专栏

自述：在工作中遇到很多有趣的需求，在实施过程中看到了自己的很多不足。
仅在这里记录收获，积累成就感，愉悦自己，感谢他人！

备注：工作中用到了百度在线地图和google离线地图，这里主要是做一个整理。
1.百度地图基本呈现

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <style type="text/css">
        /*样式必须有 否则地图不显示*/
        body, html, #maps {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin:3px 3px 3px 3px;
            margin-left: 3px;
            font-family: "微软雅黑";
        }
    </style>    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的key"></script>
    <title>地图展示</title>
</head>
<body>
    <div id="maps"></div>
</body>
</html>
<script type="text/javascript"> 
    var map;
    var listrner;//click监听    
    var i = 0;//点击图标的个数 
    //异步初始化地图 InitMap也可以回调使用
    window.onload = InitMap;
    //初始化地图
    function InitMap()
    {
        var mapOptions = ({
            minZoom: 9,
            maxZoom: 18,
            mapType: BMAP_NORMAL_MAP,//默认
        });
        map = new BMap.Map("maps", mapOptions);
        map.centerAndZoom("武汉", 14);
        //添加控件
        map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] }));
        map.addControl(new BMap.GeolocationControl({//定位
            enableAutoLocation: true,
            Icon: new BMap.Icon("../Other/Img/footprint_icon.png", new BMap.Size(23, 25)),
        }));
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.OverviewMapControl({ isOpen: true }));//缩略度
        map.addControl(new BMap.ScaleControl());//比例尺
        map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
        //添加右键菜单
        var menu = new BMap.ContextMenu();
        menu.addItem(new BMap.MenuItem("MaxZoom", function () { map.setZoom(18) }, 100));
        menu.addItem(new BMap.MenuItem("MinZoom", function () { map.setZoom(9) }, 100));
        menu.addItem(new BMap.MenuItem("Location", function (point) { MenuCallBack(point) }, 100));
        menu.addItem(new BMap.MenuItem("RemoveLis", function () { listrner.RemoveEventListener("click", ShowLatLng); }, 100));
        map.addContextMenu(menu);
    }
    //地图监听打点     
    function ShowLatLng(e)
    {        
        var point = new BMap.Point(e.point.lng, e.point.lat);
        var icon = new BMap.Icon("http://7xic1p.com1.z0.glb.clouddn.com/markers.png", new BMap.Size(23, 25), {
            offset: new BMap.Size(10, 15),
            imageOffset: new BMap.Size(0, 0 - i * 25)
        });
        var marker = new BMap.Marker(point, { icon: icon });
        marker.enableDragging();
        marker.addEventListener("click", function () {
            this.openInfoWindow(new BMap.InfoWindow("<p style='align-content:center'>当前坐标</p><p>经度：" + e.point.lat + "</p><p>纬度：" + e.point.lng + "</p>"))
        })
        map.addOverlay(marker);
        i++;
    }    
    function MenuCallBack(point)
    {
        var marker = new BMap.Marker(point);        
        marker.addEventListener("click", function () {
            this.openInfoWindow(new BMap.InfoWindow("<p style='align-content:center'>当前坐标</p><p>经度：" + point.lat + "</p><p>纬度：" + point.lng + "</p>"))
        })
        map.addOverlay(marker);
        listrner = map.addEventListener("click", ShowLatLng);
    }

</script>