百度地图

最新推荐文章于 2024-09-02 17:34:07 发布
最新推荐文章于 2024-09-02 17:34:07 发布
阅读量240 收藏
点赞数 1
分类专栏： 前端工具 文章标签： 前端 百度地图

此功能需要到百度地图先获取ak秘钥，但并不需要认证，只需要秘钥就可以在前端实现输入文字，显示地点地图所在地位置。（只能根据下拉菜单来提供位置定位）

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地址选择</title>
<style type="text/css">
body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: "微软雅黑";
    font-size: 14px;
}

#l-map {
    height: 500px;
    width: 100%;
}

#r-result {
    width: 100%;
}
</style>
<script type="text/javascript"
    src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥">
    //v1.5版本的引用方式：src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"
    //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>

<body>
    <div id="r-result">
        <input type="text" id="suggestId" size="20"
            style="width: 500px; height: 30px" placeholder="请输入地址" /> <input
            type="button" onclick="addrSearch()" class="btn btn-danger"
            value="搜索" style="width: 150px; height: 35px">
    </div>
    <div id="searchResultPanel"
        style="border: 1px solid #C0C0C0; width: 150px; height: auto; display: none;"></div>
    <div id="l-map"></div>
    <script type="text/javascript">
        var marker;
        var zoomSize = 18;
        var map = new BMap.Map("l-map");
        var lon = 116.404; //默认为北京市
        var lat = 39.915;

        //业务处理，获取业务中的经纬度，有则处理，没有则用默认北京
        if (typeof getBizPoint == "function") {
            var pointJson = getBizPoint();
            lon = pointJson.lon;
            lat = pointJson.lat;
        }

        //确定中心位置
        var point = new BMap.Point(lon, lat);
        map.centerAndZoom(point, zoomSize);

        //标注
        marker = new BMap.Marker(point);// 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        marker.enableDragging(); // 可拖拽
        marker.addEventListener("dragend", setBizValue);

        // 添加带有定位的导航控件
        var navigationControl = new BMap.NavigationControl({
            // 靠左上角位置
            anchor : BMAP_ANCHOR_TOP_LEFT,
            // LARGE类型
            type : BMAP_NAVIGATION_CONTROL_LARGE,
            // 启用显示定位
            enableGeolocation : true
        });
        map.addControl(navigationControl);

        var geoc = new BMap.Geocoder();

        //输入地址事件处理 start
        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; //获取第一个智能搜索的结果
                setBizValueForPoint(pp);
                map.centerAndZoom(pp, zoomSize);
                marker = new BMap.Marker(pp);
                marker.enableDragging(); // 可拖拽
                map.addOverlay(marker); //添加标注
                marker.addEventListener("dragend", setBizValue);
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete : myFun
            });
            local.search(myValue);
        }

        function G(id) {
            return document.getElementById(id);
        }
        //输入地址事件处理 end

        //地址转坐标
        function addrSearch(serachAddr) {
            // 创建地址解析器实例
            var myGeo = new BMap.Geocoder();
            // 将地址解析结果显示在地图上,并调整地图视野
            if (!serachAddr) {
                serachAddr = $("#suggestId").val();
            }
            myGeo.getPoint(serachAddr, function(point) {
                if (point) {
                    setBizValueForPoint(point);
                    map.clearOverlays();
                    map.centerAndZoom(point, zoomSize);
                    marker = new BMap.Marker(point);
                    marker.enableDragging(); // 可拖拽
                    map.addOverlay(marker); //添加标注
                    marker.addEventListener("dragend", setBizValue);

                } else {
                    console.log("search click no results!")
                }
            });

        }

        //业务方法 start
        //根据事件，设置经纬度和地址
        function setBizValue(e) {
            var point = e.point;
            setBizValueForPoint(point);
        }

        //根据Point，设置经纬度和地址
        function setBizValueForPoint(point) {
            lon = point.lng;
            lat = point.lat;
            geoc.getLocation(point, function(rs) {
                var addComp = rs.addressComponents;
                addr = addComp.province + addComp.city + addComp.district
                        + addComp.street + addComp.streetNumber;
                if (typeof setBizFun == "function") {
                    setBizFun({
                        lon : lon,
                        lat : lat,
                        addr : addr
                    });
                }
            });

        }

        //根据marker，设置经纬度和地址
        function setBizValueForMarker() {
            var point = marker.getPosition();
            setBizValueForPoint(point);
        }

        //end
    </script>
</body>
</html>
jzhuoyqing
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android — 之百度地图定位+添加Mark+InfoWindow
man_help的博客
03-10 1万+
前言：　　新手上路，这几天在弄百度地图SDK的使用（吐槽 : 官网上的开发指南简直就是实力坑爹，可能是开发人员太忙，维护不及时吧），我对本次学习的要求也不高：能正常显示地图，能定位，能添加mark(覆盖物)，点击mark时能提示当前位置信息就行，再深的东西，以后有时间再去研究吧，毕竟新手还是欠火候。
基于百度地图的离线地图资源压缩包
03-23
本资源压缩包“基于百度地图的离线地图资源”是为Vue.js框架设计的，旨在帮助开发者实现离线环境下依然能提供地图服务的功能。 首先，我们需要理解Vue.js是一个轻量级的前端JavaScript框架，它以其简洁的API和组件...
百度地图api 实现 地址选择框
一直在努力的程序猿
09-13 5732
百度api 现在功能越来越强大了。具体参见网址： 百度地图api 需求：根据地址或者经纬度带出标注（marker），移动标注，或者输入地址确认精度度。 实现： 1、javascript 大众版来实现 地址选择弹窗（http://developer.baidu.com/map/index.php?title=jspopular ） 2、必须申请一个百度地图ak,就是你秘
百度地图API的使用
热门推荐
stc_ljc的博客
02-16 14万+
带你做出百度地图/教你如何调用API了解地图的使用场景，百度地图API介绍
百度地图api-基本用法总结
星银色飞行船的博客
02-11 1万+
百度地图api的一些常用方法
百度地图 实现 热力图
YL
06-21 6705
最近做项目遇到地图相关的需求，然后采用百度地图来实现地图热力图、省区标注点及描边。主要是几个笔记记录下。 热力图： 代码如下： // 地图 var map = new BMap.Map("mapWarp"); // 创建地图实例 var point = new BMap.Point(87.635087, 43.79934); map.centerAndZoom(point, 8); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(); // 允许滚轮缩放 /
百度地图 创建应用
qq_36511401的博客
09-26 1万+
1、你要使用百度地图的服务，就先要去百度地图开放平台创建一个应用，从而获取到一个大多数的Api服务都要用到的Key。4、随便输一个应用名称，ip白名单写0.0.0.0/0就可以了。5、大功告成，我们以后要用的就是：访问引用（AK） 这个数据。
如何调用百度地图API
.
06-15 1万+
百度地图API提供了多种服务，包括地图展示、路线规划、地点搜索、实时交通等。
如何配置百度地图应用访问白名单
呆呆papa的博客
08-06 1万+
百度地图的应用有四种类型，移动端（ios和Android）不需要ak、浏览器端需要设置Referer白名单、服务器端需要设置IP白名单。接下来会在官方给出的白名单配置的基础上进一步说明：什么是Referer？http的请求首部中有一个Referer字段，用来说明包含了当前请求的URI的文档的URL。 譬如，在访问www.baidu.com的时候，服务器返回一个HTML，这个文档中包含了图片等其他资源，又会向服务器发送http请求获取这些资源，而这些资源的http请求头中会有一个Referer字段，标识包含这
uniapp使用百度地图
一切都不太晚
09-19 8940
百度地图的使用心得，手把手教你玩转百度地图，看了秒懂。
百度地图-个性化地图用法
星银色飞行船的博客
02-11 5261
个性化地图 效果 登录 百度地图api官网 点击开发文档->个性化地图编辑器 开始使用 点击新建 选一个免费的模板 点击使用 点击编辑JSON 复制所有json代码 将复制的json对象赋值给styleJson 对象 map.setMapStyleV2({ styleJson: styleJson });即可渲染地图 ...
百度地图全国以及各省json文件
06-20
主要是百度地图的全国以及各省的json数据，用于切换各省地图的时候使用，通过百度api的echarts.registerMap('China', mapname)，其中mapname，就是通过require导入的json文件，示例：var mapname= require('./chart....
leaflet加载百度地图
07-01
然而，由于百度地图使用的是自己的坐标系统（BD-09），与常见的WGS84坐标系不同，所以在使用Leaflet时直接加载百度地图会遇到兼容性问题。本教程将详细讲解如何通过Leaflet成功加载并显示百度地图。 首先，我们需要...
百度地图mapv 地图扩散波纹效果
04-24
随着大数据、云计算、物联网的诞生、大量的设备数据、传感器数据、行为数据、日志数据、基础画像数据、运行数据等等都对传统的数据展现提出了新的要求 。随着前端技术的不断成熟，...本节课我们主要以百度地图结合map
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 175
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 823
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
Window Performance API
Bruce__taotao的博客
08-28 1880
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 364
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
百度地图API使用指南
"百度地图API说明文档提供了关于如何使用百度地图API来创建和操作地图实例的详细信息。这个文档涵盖了Map类的构造函数和各种配置、地图状态查询及修改的方法。" 在使用百度地图API时，首先需要了解核心类`Map`，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值