关闭

百度地图api,定位,添加城市控件,单击获得经纬度并mark

标签: 百度地图api控件
6109人阅读 评论(2) 收藏 举报
分类:
<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=13hKkYUjCLhkhnRlidP7Bmor"></script>
<title>单击获取点击的经纬度</title>
</head>
<body>
<div id="allmap" style="width:800px;height:600px;"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var mk;
    map.centerAndZoom("广州", 12);
    map.enableScrollWheelZoom();   //启用滚轮放大缩小,默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用
    map.enableInertialDragging();


    //添加选择城市的控件
    var size = new BMap.Size(50, 20);
    map.addControl(new BMap.CityListControl({
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        offset: size,
        // 切换城市之间事件
        // onChangeBefore: function(){
        //    alert('before');
        // },
        // 切换城市之后事件
        // onChangeAfter:function(){
        //   alert('after');
        // }
    }));


    //单击获取点击的经纬度
    map.addEventListener("click", function (e) {
        //alert(e.point.lng + "," + e.point.lat);
        map.removeOverlay(mk);
        mk = new BMap.Marker(e.point);
        map.addOverlay(mk);
    });


    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });
    map.addControl(navigationControl);
    // 添加定位控件
    var geolocationControl = new BMap.GeolocationControl();
    geolocationControl.addEventListener("locationSuccess", function (e) {
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        //alert("当前定位地址为:" + address);
    });
    geolocationControl.addEventListener("locationError", function (e) {
        // 定位失败事件
        alert(e.message);
    });
    map.addControl(geolocationControl);


  
</script>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:125490次
    • 积分:1530
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:33篇
    • 译文:0篇
    • 评论:24条
    文章分类
    最新评论