调用示例

!<!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. maven 打包构建相关命令

    1.命令 mvn clean package 依次执行clean.resources.compile.testResources.testCompile.test.jar(打包)等7个阶段. mvn ...

  2. Flask基础(10)-->http的无状态协议解决办法一(客户端cookie)

    http的无状态协议 http是一种无状态协议,浏览器请求服务器时无状态的 什么是无状态? 无状态:指的是一次用户请求时,浏览器.服务器无法知道之前这个用户做过什么,每次请求都是一次新的请求. 无状态 ...

  3. .net core 3.0 Signalr - 03 使用MessagePack压缩传输内容

    ## MessagePack基础介绍 Signalr默认使用的是json形式传递数据,但是signalr提供了灵活的扩展,支持MessagePack形式序列化数据,以增加性能降低网络传输的效果,极大的 ...

  4. Docker系列（三）：将.Net Core Api部署到Kubernetes (K8s)中

    1.新建一个WebApi项目,并添加Dockerfile文件: FROM microsoft/dotnet:2.1-aspnetcore-runtime AS base WORKDIR /app EX ...

  5. VR中的Redirection

    在虚拟现实(Virtual Reality,VR)中,很重要的一点就是用户的在虚拟环境中的漫游(navigation).除了固定视点的VR电影,一般的VR应用,特别是游戏或者其他交互式的应用,都会依赖 ...

  6. win10 cnpm安装完之后一直说不是内部命令的原因

    找到cnpm的默认安装路径 一般默认的是 D:\Program Files\nodejs\node_modules 然后添加环境变量中 win10是在系统环境变量中切记不是在用户变量中.保存之后,重新 ...

  7. [Python] Python 学习记录（2）

    1.range(x,y) [x,y) >>> range(0,4) #0,1,2,3 >>> range(1,4) #1,2,3 2.dics dics.get(k ...

  8. 10个值得深思的_PHP_面试问题

    Q1 第一个问题关于弱类型 $str1 = 'yabadabadoo'; $str2 = 'yaba'; if (strpos($str1,$str2)) { echo "\"&q ...

  9. java中的char

    System.out.println("char二进制位数:" + Character.SIZE);//16 即2个字节 在c语言中,char类型占一个字节,而汉子占两个字节,所以 ...

  10. springboot+thymeleaf国际化方法一：LocaleResolver

    springboot中大部分有默认配置所以开发起项目来非常迅速,仅对需求项做单独配置覆盖即可 spring采用的默认区域解析器是AcceptHeaderLocaleResolver,根据request ...