百度地图-控件使用以及地点展示

最新推荐文章于 2023-08-16 08:51:00 发布

三十的程序猿

最新推荐文章于 2023-08-16 08:51:00 发布

阅读量422

点赞数

分类专栏： php进阶

本文链接：https://blog.csdn.net/pandamf/article/details/101393066

版权

php进阶专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.开篇说说

百度地图开放api ，免费使用，功能强大啊.

2.示例代码

下面示例提供地图展示，标注地点，地点信息展示，和拖拽事件保存坐标。

该示例完全依赖百度地图的 javascript 库

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{width:100%;height:500px;}
        #r-result{width:100%;margin-top:5px;}
        p{margin:5px; font-size:14px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图key"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <title>添加/删除工具条、比例尺控件</title>
</head>
<body>
    <div id="allmap" style="width:600px;height:500px; margin:auto;"></div>
    <p>在地图的左上、右上分别展示完整、缩略样式的缩放平移控件；同时在地图的左上方展示比例尺控件，点击按钮查看效果</p>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能

    var map = new BMap.Map("allmap");
    var point = new BMap.Point(113.252949,23.119689);
    map.centerAndZoom(point, 20);
    //添加控件
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
    map.addControl(top_left_control);        
    map.addControl(top_left_navigation);     
    map.addControl(top_right_navigation); 
    //添加标注
    //var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
    //var marker = new BMap.Marker(new BMap.Point(113.252949,23.119689),{icon:myIcon});
    var marker = new BMap.Marker(new BMap.Point(113.252949,23.119689));
    map.addOverlay(marker);
    marker.setAnimation(BMAP_ANIMATION_BOUNCE);//弹跳动画
    //
    var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "上下九步行街", {
        title: "上下九步行街", //标题
        panel : "panel", //检索结果面板
        enableAutoPan : true, //自动平移
        searchTypes :[
            BMAPLIB_TAB_FROM_HERE, //从这里出发
            BMAPLIB_TAB_SEARCH   //周边检索
        ]
    });
    marker.addEventListener("click", function(){    
        searchInfoWindow1.open(new BMap.Point(113.252949,23.119689));    
    });

    /*缩放控件type有四种类型:
    BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/

    //添加拖动事件
    marker.enableDragging();    
    marker.addEventListener("dragend", function(e){    
        alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
    }) 
</script>

下面是上下九步行街的位置图

3.参考

http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/mark

http://lbsyun.baidu.com/jsdemo.htm#d0_3

http://lbsyun.baidu.com/jsdemo.htm#d0_4

http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/widget

三十的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图-控件使用以及地点展示

1.开篇说说百度地图开放api ，免费使用，功能强大啊.2.示例代码下面示例提供地图展示，标注地点，地点信息展示，和拖拽事件保存坐标。该示例完全依赖百度地图的 javascript 库<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" cont...
复制链接

扫一扫