1.百度地图

百度地图开放平台 https://lbsyun.baidu.com/

使用百度地图时导入JavaScript包

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

1.1.如何申请 ak 密钥

在开发平台找控制台 / 应用管理 / 我的应用创建访问应用（AK）密钥

1.2.参考代码

在开发平台找开发文档 / JavaScript API 可以得到百度地图各种应用的 DEMO

2.展示地图

2.1.显示地图

导入 JavaScript 包

<script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=bfnV92gwMphakBP0m8usEhzq7bxwCB1s"></script>
<script th:src="@{/js/jquery-3.2.1.min.js}"  src="../../static/js/jquery-3.2.1.min.js"></script>

增加样式设置

<style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>

页面 HTML 元素

    <div id="allmap"></div> <!--地图div-->

增加javascript 代码

默认打开的地址 , 可以通过传入的 经纬度或者地址名字两种方式

<script  type="text/javascript"  >map = new BMap.Map("allmap");// 设置中心点坐标和放大倍数// 以 经纬度 定位// var point = new BMap.Point(116.449562,39.926373);// map.centerAndZoom(point, 12);// 以 地名 定位map.centerAndZoom('北京市', 12);map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件map.addControl(new BMap.ScaleControl());          //比例尺map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));   //右下角，打开缩略地图// map.addControl(new BMap.MapTypeControl());        //地图类型 三维方式 有错误map.setMapStyle({style:'light'});
</script>

2.2.搜索地址

页面增加元素

地名:<input type="text" name="modalAddr">
<input type="button" value="查询"  onclick="searchByStationName()">
经度:<input name="acLng" type="text">
纬度:<input name="acLat" type="text">

增加处理函数

function searchByStationName() {localSearch = new BMap.LocalSearch(map); // 创建 搜索对象localSearch.enableAutoViewport();     //允许自动调节窗体大小/*清理 信息*/map.clearOverlays();//清空原来的标注$("input[name='acLng']").val("");$("input[name='acLat']").val("");// 得到查询地址var keyword = $("input[name='modalAddr']").val();// 搜索结果 回调函数localSearch.setSearchCompleteCallback(function (searchResult) {console.log(searchResult)// 取满足条件中的第0个var poi = searchResult.getPoi(0);console.log(poi.address)map.centerAndZoom(poi.point, 15);// 创建一个标注，为要查询的地方对应的经纬度var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  if (marker != null && marker != undefined) {$("input[name='acLng']").val(poi.point.lng);$("input[name='acLat']").val(poi.point.lat);}//标注点可拖拽marker.enableDragging();// 标注 绑定拖拽事件marker.addEventListener("dragging", function (msg) {$("input[name='acLng']").val(msg.point.lng);$("input[name='acLat']").val(msg.point.lat);});// 显示 覆盖物map.addOverlay(marker);// 用于显示的信息var content = keyword + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;// 点击显示内容var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");// 绑定点击事件marker.addEventListener("click", function () {this.openInfoWindow(infoWindow);});// 标注 绑定拖拽释放事件marker.addEventListener("dragend", function () {alert("lng:" + this.getPosition().lng + "    " + "lat:" + this.getPosition().lat)});}); localSearch.search(keyword);
}

百度地图 ( 一 ) 显示地图相关推荐

python调用谷歌地图api_python显示地图与谷歌地图
我找到了一个 googlemaps软件包来从python访问谷歌地图,但没有找到任何演示以在python代码中显示结果. 例如: gmaps = googlemaps.Client(key='Add ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
html在线地图,Html显示地图
Html可以通过JS来实现第三方地图的显示,如: 高德: 效果如下:浏览器小区域和全屏展示代码如下:把key换成自己申请的key值高德配置(开发者平台-->控制台) zoom: 10, ic ...
Android 高德地图，显示地图，并定位当前的位置
基本配置,依赖lib,配置权限,配置key等这些这里就不做介绍了 1.首先在布局xml文件中添加地图控件: <com.amap.api.maps.MapViewandroid:id=" ...
Android开发之高德地图无法显示地图的原因
公司项目接入高德地图,我也遇到这个问题了,地图怎么都无法显示出来,定位按钮,缩放按钮都有,就是没有地图怎么回事儿呢? 咱们先上图看下实际上出现这个问题很简单,原因是因为你的so库没有拷全!! 因为我 ...
谷歌地图API 显示地图添加maker点，信息窗体及事件
引入秘钥为GoogleMaps设置宽高样式 var maps = new google.maps.Map(document.getElementById("GoogleMaps" ...
Python Folium地图无法显示/地图空白
排查了一下无法访问cdn.jsdelivr.net 去Github看确实中国地区有无法访问的issue 官方给出了回答 GitHub - PipecraftNet/jsdelivr-auto-fal ...
Unity2D 简易2D地图 —— 地图的显示
刚刚接触Unity,新手入门,项目为GIS类应用,包括地图的显示,漫游和缩放等功能,记录如下: 1.新建Unity2D项目,准备好一张世界地图 2.建立空物体,命名为MapView,把上面的图片拖放到 ...
java百度地图地名定位地址_百度地图定位显示省市区街道名称，非常实用
[实例简介] 百度地图定位显示省市区街道名称,非常实用 [实例截图] [核心代码] locSDK_3.1_Demo └── locSDK_3.1_Demo ├── AndroidManifest.xm ...

百度地图 ( 一 ) 显示地图

1.百度地图

1.1.如何申请 ak 密钥

1.2.参考代码

2.展示地图

2.1.显示地图

2.2.搜索地址

百度地图 ( 一 ) 显示地图相关推荐

最新文章

热门文章