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

原创 2015年11月20日 15:32:59
<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>


相关文章推荐

百度地图API的IP定位城市和浏览器定位(转)

百度地图API提供了Geolocation 和 LocalCity两个服务类。 这俩API可以分别供用户在JavaScript中进行定位和城市确认。 1 本质上,Geolocation这个...

百度地图与 select下拉框的双向维护

今天做了一款省市区select标签  和  百度地图之间双定位的模块, 给大家分享一下 前期准备:  page.html(页面省市区select标签, 同时还隐藏了经纬度的input, 用于定位); ...

Android — 之百度地图定位+添加Mark+InfoWindow

前言:  新手上路,这几天在弄百度地图SDK的使用(吐槽 : 官网上的开发指南简直就是实力坑爹,可能是开发人员太忙,维护不及时吧),我对本次学习的要求也不高:能正常显示地图,能定位,能添加mark(覆...

利用百度地图api通过城市地址等信息取经纬度

标红的是可以通过经纬度获得当前城市信息(微信定位使用)。 Geocoding API有哪些功能? Geocoding API包括地址解析和逆地址解析功能。 地址解析是指,由详细到街道...

百度地图JS-API:点击获取经纬度以及地址

百度地图API 获取地址 经纬度

项目里用百度地图城市列表不显示的问题

项目里用百度地图城市列表不显示的问题

根据百度地图API加载地图及控件

没用过之前觉着百度地图的运用很神奇,其实看了API后以及一些相关文章,根据提示直接调用百度地图并出现预期效果后,就觉得没有想象中的难。所以遇到一些事的时候不要被未知所迷惑,要迎难而上,用于解决。下面引...

html5 geolocation / 百度地图api Geolocation 定位当前城市信息

今日开端:  根据当前所处位置 定位所在城市信息    刚开始采用html5的 geolocation 来获取当前所在经纬度   折腾一番终不能获取城市信息 只能获取到当前的经纬度    查找...

Geolocation获取当前位置的经纬度在百度地图中就是比google地图中精确的原因

同样的Geolocation中经纬度百度地图就是比google地图精确,原因是GCJ-02,原来就是他影响google地图定位的精确性,都是它惹的祸。 我承认我知道的太多了,感谢国家感谢党。 百度...

百度地图:普通覆盖物,以及多边形覆盖物,及他们的描述信息的添加,修改,删除,查看功能,还有多边形根据名称查询功能;

版权所有,未经本人允许,禁止转载! 这个界面功能是,普通覆盖物,以及多边形覆盖物,及他们的描述信息的添加,修改,删除,查看功能,还有多边形根据名称查询功能; 由于这个界面的数据是存在数据库,还有后...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:百度地图api,定位,添加城市控件,单击获得经纬度并mark
举报原因:
原因补充:

(最多只允许输入30个字)