百度地图(常用方法)
LBS:locationBusinessServer基于定义位置的商业服务
例如:百度地图、高德地图
使用步骤(百度地图)
1.登录注册获取密钥AK
2.引入百度地图的js
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"> </script>
3.创建地图的容器
<div id="container"></div>
4初始化地图
var map = new BMapGL.Map("container");
5创建一个地图中心点
var point = new BMapGL.Point(113.665, 34.784);
6.设置中心点和滚轮缩放
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true)//滚轮缩放
添加地图控制器
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
创建点、线、面,绘制圆
// 创建点
var p = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
// 创建标记
var m = new BMapGL.Marker(p);
//创建线
var polyline = new BMapGL.Polyline(line,{strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
//创建面
var polygone = new BMapGL.Polygon(line,{fillColor:"red",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})
// 绘制圆圈
var circle = new BMapGL.Circle(point,2000,{strokeColor:"green"});
// 添加圆圈
map.addOverlay(circle);
添加标注
var label = new BMapGL.Label("中国前端学习基地", { // 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(0, 0) // 设置标注的偏移量
})
// 添加标签
map.addOverlay(label); // 将标注添加到地图中
// 设置标签的样式
label.setStyle({
fontSize:"32px",
color:"red"
})
信息窗口
var opts = {
width: 250, //信息窗口宽度
height: 200, //信息窗口高度
title: "学好前端,月薪过万"//信息标题
}
var infoWindow = new BMapGL.InfoWindow(
`<P>前端很简单只有<strong>js</strong></p>`,
opts)
// 创建信息窗口对象
// map.openInfoWindow(infoWindow, point)//打开窗口
//绑定单击事件
marker.addEventListener("click", e => {
map.openInfoWindow(infoWindow, point)
})
位置检索、周边检索和范围检索
body中加上
<input type="" οnchange="search(this)" />
//创建一个本地搜索
var local = new BMapGL.LocalSearch(map, {
renderOptions: { map: map }
});
function search(e) {
//表单值发生变化时候进行搜索
local.search(e.value);
}
百度地图(常用方法)相关推荐
- android百度地图定位自定义图标,Android应用开发之android 百度地图自定义圆,更改默认图标等常用方法...
本文将带你了解Android应用开发之android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): ...
- android百度地图画圆,Android应用开发之android 百度地图自定义圆,更改默认图标等常用方法...
本文将带你了解Android应用开发android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): 1 ...
- 百度地图java sdk_百度地图-地图SDK常用方法总结(一)
最近在做关于地图的项目,这里将用到的关于地图SDK的相关方法做一个总结归纳. 初始化 SDKInitializer.initialize(Context) 复制代码 MapView 与 BaiduMa ...
- 百度地图覆盖物OverlayOptions
转载:http://blog.csdn.net/u012637501/article/details/45603857 目前百度地图SDK所提供的地图等级为3-19级,所包含的信息有建筑物.道路.河流 ...
- android 百度地图 uisettings,百度地图开发者常用类学习
1.类MapView public final class MapView extends ViewGroup 一个显示地图的视图(View).它负责从服务端获取地图数据.它将会捕捉屏幕触控手势事件. ...
- 百度地图android室内定位,百度地图4.0正式发布,主打免费语音导航、室内定位、实时公交和生活搜索 (视频)...
自2010年10月百度地图在塞班平台上线了第一个版本以后,陆续登陆了Android和iPhone平台,据百度地图团队介绍,其最新的用户数已达7000万.今天,百度地图4.0 正式发布(iPhone版 ...
- 百度地图轨迹回放,自定义路书,边走边画线
转自:https://www.cnblogs.com/syj2016/p/5685294.html 百度地图轨迹回放,自定义路书,边走边画线 在原有的百度路书的基础上,做了修改,使其能实现边走边画线的 ...
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
- html 高德地图坐标,百度地图,高德地图,HTML5经纬度比较
对于一个地点的经纬度,是确定的?这个问题,我想很多人都会回答,肯定了,可实际上呢?我只能呵呵了. 在使用百度地图的过程中,发现一个很奇怪的现象,有时候调用百度地图js API时,后得到一个错的离谱的地 ...
最新文章
- CVPR 2019超全论文合集新鲜出炉!| 资源帖
- 【信息安全】职业发展之惑系列之二 --- 怎样的心态才有助于职业发展
- 由c#的值类型与引用类型说开去
- WPF新手实践7:MVVM Light Toolkit(七、Messenger)
- 关于Unity中的本地存储
- 《MySQL 8.0.22执行器源码分析(3.2)关于HashJoinIterator》
- python的核心理念_python核心基础 - 草稿
- 配置远程登陆交换机方法
- soapui使用教程2-属性与脚本
- 传统人工势场法---经典算法
- Android一键清空内存,教你一键深度清理手机垃圾,瞬间释放几个G,再也不怕内存不够了...
- matlab中solver函数_matlab solve函数的用法
- Excel图标美化技巧
- 4.深度强化学习------PPG(Phasic Policy Gradient)算法资料+原理整理
- win32 API函数大全
- trie树模板(前缀树)
- GridView列标题设置颜色
- 强推:raw图片处理软件DxO PhotoLab
- Android11及以上 文件读写权限申请
- 制作一个心率/脉搏测量硬件