百度地图api的使用

    <!-- 百度地图js api -->
    <script type="text/JavaScript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <script type="text/javascript">
//加载百度地图
function setPoint(obj, level) {
    var map = new BMap.Map("container"); // 创建地图实例,参数为对应 div 的 id
    var point2;
    if(obj == ‘‘) {
        point2 = new BMap.Point(120.136625,30.265952); // 创建点坐标
    }else{
        point2 = obj;
    }
    if (level == ‘‘) {
        level = 13;
    }

    map.centerAndZoom(point2, level); // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.NavigationControl());

    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());

    //启用滚轮放大缩小,默认禁用
    map.enableScrollWheelZoom();

    //启用地图惯性拖拽,默认禁用
    map.enableContinuousZoom();

    map.setDefaultCursor("auto");

    var marker = new BMap.Marker(point2); // 创建标注
    map.addOverlay(marker);
    //可以拖拽
    marker.enableDragging();
    //标注拖拽后的位置
    marker.addEventListener("dragend", function(e) {
        getAddress(e.point.lng, e.point.lat);
    });
    //点击的位置
    var _marker = marker;
    map.addEventListener("click", function(e) {
        //删除具体标注
        map.removeOverlay(_marker);
        var pointClick = new BMap.Point(e.point.lng, e.point.lat);
        //创建新标注
        var marker1 = new BMap.Marker(pointClick);
        map.addOverlay(marker1);
        //可以拖拽
        marker1.enableDragging();
        //标注拖拽后的位置
        marker1.addEventListener("dragend", function(e) {
            getAddress(e.point.lng, e.point.lat);
        });

        _marker = marker1;

        getAddress(e.point.lng, e.point.lat);
        //标注跳动
        //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
        //setPoint(pointClick, map.getZoom());

//        var map1 = new BMap.Map("allmap");
//        var point = new BMap.Point(e.point.lng,e.point.lat);
//        var gc = new BMap.Geocoder();
//        gc.getLocation(point, function(rs) {
//        alert(rs.sematic_description);
//        var addComp = rs.addressComponents;
//        var mapAddress = addComp.province+addComp.city + addComp.district
//        + addComp.street + addComp.streetNumber;
//        }); 

    });

    getAddress(120.136625, 30.265952);

}

function getAddress(a,b){
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(a,b);
    var gc = new BMap.Geocoder();
    gc.getLocation(point, function(rs){
       var addComp = rs.addressComponents;
       alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    });
}
    </script>
时间: 2024-08-24 18:41:04

百度地图api的使用的相关文章

百度地图API实现批量地址解析

1.前言 写这篇文章的原因是最近做一个GIS项目在网上爬取了一些数据,无奈只有地址的文字信息没有坐标信息,如何把信息显现在地图上呢?很纠结啊,查看了一下百度地图API惊奇的发现百度提供了地址解析的API,然后查看了他的Demo后豁然开朗,所以动手将自己的文字信息数据进行解析坐标信息.下面开始讲解. 2.方案 (1)自己数据库中的数据 (2)百度地图API Demo <!DOCTYPE html> <html> <head> <meta http-equiv=&qu

HTML5结合百度地图API创建地图应用

具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid;} </style> <script src="http://api.map.baidu.com/api?v=1.3"></script> <script> window.onload = function(){ var oInput =

Android应用中使用百度地图API定位自己的位置(二)

官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发者们提供了如下类型的地图覆盖物: 我的位置图层(MyLocationOverlay):用于显示用户当前位置的图层(支持自定义位置图标): Poi搜索结果图层(PoiOverlay):用于显示兴趣点搜索结果的图层: 路线图层(RouteOverlay):公交.步行和驾车线路图层,将公交.步行和驾车出行方案的路线及关键点显示在地图上(起.终

VUE之使用百度地图API

利用vue创建点餐系统,在点餐系统中需要知道商家地址信息,这时就需要借用百度地图API. 步骤一:申请百度地图密钥: 步骤二:在index.html中添加百度地图JavaScript API接口: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KCzp8claYra8uYAvahElV9oKUT6j7Gx1" ></script> 步

自备百度地图API密钥 解决Cooply“地图API未授权”问题

自备百度地图API密钥 解决Cooply"地图API未授权"问题 ? ? ? ? ? 有时候,当我们时,会看到提示百度未授权使用地图API,这是因为coolpy的开发者是使用的自己的百度开放平台密钥做的测试,而我们把coolpy下载来后直接使用了人家的百度地图api访问权限,这就是导致问题的原因. 所以,我们在下载来coolpy准备使用的时候,应该先提前将API key换成自己的.这样你使用的时候才不会时不时出问题 ? ? 首先登陆百度账号,注册成为开发者 http://develop

百度地图API多个点聚合时,标注添加的标签label地图刷新就丢失的问题解决

当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合API<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></scrip

数据视化Echarts+百度地图API实现市县区级下钻

开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是很详细,对于刚接触Echarts的让人来说可能有些搞不明白,在这里我把Echarts下钻开发过程中总结的知识分享给大家,也能使自己加深印象,当然啦,对于一些在软件行业折腾了几年的老油条来说,这些都是一些非常基础的东西.但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的人.如果哪里写的

百度地图API

本文我将从如何使用地图API(本文以百度为例,谷歌类似)开始,往后的扩展行的内容详见后续文章.1.打开链接http://developer.baidu.com/map/jshome.htm  这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开源的地图API都是JS脚本写的,所以我上面的链接就只针对JAVASCRIPT进行介绍.  即使是编程菜鸟(像我这种),也知道当你在任何一个开发环境下写代码时,都需要加入头文件,例如,你要在C++里使用c

使用百度地图API制作线路轨迹播放

1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图 获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次连接相邻的2个点(注意polyline的个数比point的少1) 1.2绘制动态轨迹图(固定间隔时间) 每隔500毫秒读取一个轨迹点,实现a,b两个功能 a增加一条polyline b将marker从先前的point移到当前点 主方法使用setTimeout方法迭代来实现动态循环 Polyline在

调用百度地图 API 移动地图时 maker 始终在地图中间 并根据maker 经纬度 返回地址

1.项目要求如题目 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