调用示例

!<!DOCTYPE html>

<html>

<head>

    <title>百度地图DEMO</title>

</head>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<body>

    <div id="allmap" style="height:700px;width:800px;"></div>

    <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>

    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

</body>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>

<script type="text/javascript">

    // 百度地图API功能

    function G(id) {

        return document.getElementById(id);

    }

    // 初始化定位

    var map = new BMap.Map("allmap");

    var point = new BMap.Point(116.331398,39.897445);

    map.centerAndZoom(point,12);

    // 鼠标滑动放大缩小移动地图

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

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

    // 定位当前城市

    function myFun(result){

        var cityName = result.name;

        map.setCenter(cityName);

    }

    var myCity = new BMap.LocalCity();

    myCity.get(myFun);

    // 获取点击处坐标

    var geoc = new BMap.Geocoder();

    map.addEventListener("click", function(e){

        //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度

        var pt = e.point;

        geoc.getLocation(pt, function(rs){

            //addressComponents对象可以获取到详细的地址信息

            var addComp = rs.addressComponents;

            var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;

            //将对应的HTML元素设置值

            $("#site").val(site);

            $("#longitude").val(pt.lng);

            $("#latitude").val(pt.lat);

        });

        deletePoint();

        // 创建标注

        var marker = new BMap.Marker(pt);  // 创建标注

        map.addOverlay(marker);               // 将标注添加到地图中

        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

    });

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象

        {"input" : "suggestId"

        ,"location" : map

    });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件

        var str = "";

        var _value = e.fromitem.value;

        var value = "";

        if (e.fromitem.index > -1) {

            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;

        }

        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";

        if (e.toitem.index > -1) {

            _value = e.toitem.value;

            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;

        }

        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;

        G("searchResultPanel").innerHTML = str;

    });

    var myValue;

    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件

        var _value = e.item.value;

        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;

        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();

    });

    function setPlace(){

        map.clearOverlays();    //清除地图上所有覆盖物

        function myFun(){

            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果

            map.centerAndZoom(pp, 18);

            map.addOverlay(new BMap.Marker(pp));    //添加标注

        }

        var local = new BMap.LocalSearch(map, { //智能搜索

            onSearchComplete: myFun

        });

        local.search(myValue);

    }

    // 删除标注

    function deletePoint(){

        map.clearOverlays();

    }

</script>

</html>

百度地图Javascript API 调用示例的更多相关文章

  1. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  2. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  3. WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现

    原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...

  4. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  5. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  6. 苹果手机 微信调用百度地图Javascript API 频繁闪退问题

    最近在网页中调用百度地图API js大众版,但是在IOS8系统中,缩放的时候频繁闪退,安卓手机没有这个问题! 在网上查询了下,有网友回答说不要频繁的去new marker,而是初始化话一定量的mark ...

  7. 百度地图 Javascript API 笔记

    因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...

  8. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

    项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...

  9. 百度地图JavaScript API本地搜索的结果面板

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. Java静态代理&动态代理&Cglib代理详解

    一.静态代理 根据被代理的类的时机的不同,如果在编译阶段就能确定下来的被代理的类是哪一个,那么,就可以使用静态代理的方式. 申明一个接口: /** * @author jiaqing.xu@hand- ...

  2. java程序猿如何练习java版的易筋经？

    故事背景 电视剧<天龙八部>中,阿朱易容后进入少林寺偷走了<易筋经>,她一直想把这本书送给乔峰.耿直的乔峰觉得此书来历不正,不肯接受.几番波折,这本书最后落到聚贤庄庄主游坦之手 ...

  3. python爬虫——简易天气爬取

    通过爬虫,抓取http://www.weather.com.cn的天气信息 功能——输入城市代码,获取当日天气,简单的beautifulsoup和requests实现.(城市代码可百度查询,不全部展示 ...

  4. IDEA 学习笔记之 多线程调试

    多线程调试: 在多线程调试的时候,发现一些断点会被跳过,让人很郁闷,然后上网查了下资料,发现是自己IDEA设置不对. 使用IDEA调试多线程的时候,IDEA的断点有不同的模式,只有当Thread模式下 ...

  5. bat脚本自动安装Jmeter&Jdk

    一句话能解决的事情,绝对不要写一篇文章:一篇文章能解决的事情,绝对不要使用各种工具:一个工具能解决的事情,绝对不要跑东跑西…… 文章主要介绍脚本如何下载.安装.配置Jmeter&Jdk. 不多 ...

  6. Nginx常用命令，解决你日常运维的烦恼

    前面,跟大家简单地介绍了负载均衡和Nginx的一些基础配置(Nginx负载均衡配置实例),接下来,跟大家介绍一下Nginx的常用命令,便于日常的运维. 查看原文 停止Nginx的方法 通过之前的学习, ...

  7. Java 添加、修改、读取、删除PPT备注

    概述 幻灯片中的备注信息是只提供给幻灯片演讲者观看的特定内容,在演讲者放映幻灯片时,备注信息可给演讲者提供讲解思路,起到辅助讲解的作用.本文将通过Java程序来演示如何操作PPT幻灯片中的备注信息,要 ...

  8. opencv之形态变换

    形态变换 在opencv之膨胀与腐蚀中介绍了Dilation/Erosion的原理.建议先读这一篇,搞懂原理. 这样就可以很轻松地理解为什么本文的这些形态变换可以取得相应的效果. 基于此,我们可以组合 ...

  9. deferred对象和promise对象（一）

    个人认为阮一峰老师讲的关于deferred对象是最容易理解的. deferred对象是jquery的回调函数解决方案.解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口. d ...

  10. C#中的等值判断1

    目录 简介 值类型和引用类型的相等比较 和相等比较相关的函数 string 和 System.Uri 的等值比较 泛型接口 IEquatable<T> 自定义比较方法 举例 总结 简介 最 ...