调用示例

!<!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. 正睿OI DAY3 杂题选讲

    正睿OI DAY3 杂题选讲 CodeChef MSTONES n个点,可以构造7条直线使得每个点都在直线上,找到一条直线使得上面的点最多 随机化算法,check到答案的概率为\(1/49\) \(n ...

  2. Java 学习笔记之 Synchronized锁重入

    Synchronized锁重入: 当一个线程得到一个对象锁后,再次请求此对象锁时是可以再次得到该对象的锁.这也证明在一个Synchronized方法/块的内部调用本类的其他Synchronized方法 ...

  3. 快学Scala 第四课 （多维数组，与Java集合的互操作）

    Scala二维数组的定义: val arr2 = Array.ofDim[String](2, 2) arr2(0)(0) = "aa" arr2(1)(0) = "bb ...

  4. Docker4-docker私库的搭建及常用方法-docker-registry方式

    一.简单介绍 前面已经介绍,可以使用Docker Hub公共仓库,但是大多数情况企业都需要创建一个本地仓库供自己使用.这里介绍几种搭建私库的方法 私库的好处有几点 1.节约带宽 2.可以自己定制系统 ...

  5. k8s运维记 - 如何让部署到k8s的kong网关托管自定义静态资源？

    目的 使用kong作为目录/data/reports的静态资源服务器,为了测试,已于目录/data/reports下创建文件report.html,如下: <html> <head& ...

  6. C# 常见面试问题汇总

    1.c#垃圾回收机制 从以下方面入手展开:  1.压缩合并算法   2.代的机制  3.GC调用终结器 Garbage Collector . NET采用了和Java类似的方法由CLR(Common ...

  7. node的重点学习笔记(1)————node

    node的重点学习笔记(1)----node 提到node就必须提一下他的npm了,npm是世界上最大的开放源代码的生态系统.通俗来说这就如同亚马逊丛林,要啥物种有啥物种,一个巨大的生态圈,里面有一堆 ...

  8. conversion function——转换函数

    类型转换函数 与 explicit关键字 1.类型转换函数 在C++中,可以使用构造函数将一个指定类型的数据转换为类的对象,也可以使用类型转换函数 (type conversion function) ...

  9. 设置Linux支持中文

    1.首先在command输入locale,可以看到Linux下默认的系统语言的是英文 2.vim ~/.bashrc打开这个文件,该文件夹相当于系统配置文件 3.打开后,将后三行命令输入到文档中,最后 ...

  10. [JZOJ5456]【NOIP2017提高A组冲刺11.6】奇怪的队列

    Description nodgd的粉丝太多了,每天都会有很多人排队要签名.今天有