java如何集成百度地图

前台效果展示：

1.在百度开放平台创建自己的应用，得到访问应用的Ak钥匙

2.引入百度地图js 对应创建应用的Ak钥匙：

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

 <div class="am-form-group"><label for="suggestId" class="am-form-label">地址</label><div class="am-form-content"><input type="text" id="suggestId"  v-model="adopt.address" placeholder="请输入地址"><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div></div></div>

3.引入百度地图API：

<script type="text/javascript">// 百度地图API功能function G(id) {return document.getElementById(id);}var map = new BMap.Map("l-map");//map.centerAndZoom("成都",12);                   // 初始化地图,设置城市和地图级别。var ac = new BMap.Autocomplete(    //建立一个自动完成的对象{"input" : "suggestId","location" : map});ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";console.debug(_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("suggestId").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 getVaule() {return  myValue;}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);}
</script>

java如何集成百度地图相关推荐

Android 集成百度地图AR识别SDK（二）
废话今天我们开始集成百度地图AR识别SDK(后面简称AR SDK)的第二章,这一章我们主要讲Android Studio如何配置AR SDK 我们如果单单只看文档的话,很难看懂如何集成,我们需要结合 ...
【Springboot】集成百度地图实现定位打卡功能
目录第一章需求分析第二章概要设计第三章详细设计 3.1 环境搭建 3.1.1 获取百度地图ak 3.1.2 创建springboot项目 3.2 配置application.propert ...
微信JS-SDK之地理位置的获取与在线导航，集成百度地图实现在线地图搜索
原创声明:本文来源于本人另一博客[微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索]原创作品,绝非他处摘取,转载请联系博主本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能 ...
android百度导航实现,Android 集成百度地图实现设备定位
Android 集成百度地图实现设备定位步骤1: 申请android 端SDK : http://lbsyun.baidu.com/ 步骤2: 下载基础版SDK 步骤3: 下载示例程序步骤4: 开 ...
我可以处理Flutter集成百度地图问题解决
一年多的Flutter开发经验,从Flutter发布开始自己集成百度地图API成为插件,到百度地图自己封装Flutter插件后引用,自己解决百度地图官方封装插件问题并提交记录到官方.我可以帮助解决百度 ...
Java web实现百度地图导航
首先进入百度地图首页网址:http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 接着注册账号登录接下来要注册成为百度地图个人开发者才 ...
Android 集成百度地图之申请TTS授权最新版
Android 集成百度地图之申请TTS授权最新版. 前提:登录百度地图开放平台,且已创建好应用. 开发文档-Android 导航SDK-TTS授权申请. 这里有个坑,简单说下,进入http://yu ...
AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能注:请点击此处进行充电! 前言根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
AngularJS进阶十九在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能注:请点击此处进行充电! 前言根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...

java如何集成百度地图

java如何集成百度地图相关推荐

最新文章

热门文章