简单使用百度API生成地图步骤
web端百度地图API实现实时轨迹动态展现
web端百度地图API实现实时轨迹动态展现最近在⼯作中遇到了⼀个百度地图api中的难题，恐怕有的程序员可能也遇到过。
就是实时定位并显⽰轨迹，⽹上⼤部分都是通过创建polyline对象贴到地图上。
当然，百度地图的画线就是这样实现的，但是好多⼈会发现，如果数据量超过四五千的话，浏览器可能就要卡了，后⾯可能就直接因为浏览器内存不⾜直接崩溃。
按理讲⾯对这么少的数据，百度地图肯定会考虑到这⼀点，所以肯定有解决的⽅法。
下⾯将介绍本⼈的⽅法供⼤家参考：1、数据准备这⽅便的数据我是ajax请求从后台获取的就不说了。
画线的话我们就得⽤到百度地图api中的polyline类了，因为我们是实时定位，以前的历史路径是存在，但是我们不能每次都要new⼀个polyline对象贴到地图上，所以就需要⽤到polyline的setPath(path: Array<>)，我们把整条路径的数据全部塞进去就可以了。
这⾥我⽤⼀个json格式的数组保存每个历史路径的所有路径数据，后⾯就是来数据更新数组再找到地图上相应的polyline对象塞进去就可以了。
var polylineArray = [];//此数组专门存储历史路径var PolylineJson = {};PolylineJson["Id"] = Id;//存储相应的polyline对象PolylineJson ["PathArray"] = polylineArray ;polylineArray.push(PolylineJson);备注：Polyline是个覆盖物对象，可以和其他对象⼀样⾃定义属性的，⽐如在声明以后设置polyline的id属性直接⽤polyline.id=content就可以了。
再例如： 或 polyline.length等。
覆盖物对象可以根据⾃⼰的需求⾃定义任何属性，取值的时候只需按这个字段取就可以了。
百度地图API的使用方法
百度地图API的使用方法开始学习百度地图API最简单的方式是看一个简单的示例。
以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心:1.<html>2.<head>3.<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>4.<title>Hello,World</title>5.<script type="text/javascript"src="/api?key=46ce9d0614bf7aefe0ba562f8cf 87194&v=1.0&services=false"></script>6.</head>7.<body>8.<div style="width:520px;height:340px;border:1px solid gray"id="container"></div>9.</body>10.</html>11.12.<html><head><meta http-equiv="Content-Type"content="text/html;charset=utf-8"/><title>Hello,World</title><script type="text/javascript"src="/api?key=46ce9d0614bf7aefe0ba562f8cf87 194&v=1.0&services=false"></script></head><body><div style="width:520px;height:340px;border:1px solid gray"id="container"></div></body></html>1.<script type="text/javascript">2.var map=new BMap.Map("container");//创建地图实例3.var point=new BMap.Point(116.404,39.915);//创建点坐标4.map.centerAndZoom(point,15);//初始化地图，设置中心点坐标和地图级别5.</script>6.<script type="text/javascript">var map=new BMap.Map("container");//创建地图实例var point=new BMap.Point(116.404,39.915);//创建点坐标map.centerAndZoom(point,15);//初始化地图，设置中心点坐标和地图级别</script>引用百度地图API文件当您引用地图API文件时，需要使用自己申请的API密钥。
百度地图api使用文档marker标注label使用
引入百度api<script type="text/javascript" src=".com/api?v=1.4"></script> 1.4api版本<script type="text/javascript" src=".com/library/MapWrapper/1.2/src/"></script> 转化gps坐标google坐标用初始化地图var myMap = new BMap.Map("divMap"); //divMap为要在id为divMap的div中myMap.centerAndZoom(new BMap.Point(116.404, 39.915), 12);//地图显示中心坐标为116.404,39.915，放大级别为12myMap.enableScrollWheelZoom(); //允许鼠标滚轮滑动放大缩小地图label添加var point=new BMap.Point(116.404, 39.915);//label显示的位置var myLabel = new bel("海辉房产21000元", //为lable填写内容{offset:new BMap.Size(-60,-60), //label的偏移量，为了让label的中心显示在点上position:point}); //label的位置myLabel.setTitle("我是文本标注label");myLabel.setTitle("我是文本标注label");//为label添加鼠标提示myLabel.setStyle({ //给label设置样式，任意的CSS都是可以的"color":"red", //颜色"fontSize":"14px", //字号"border":"0", //边"height":"120px", //高度" width":"125px", //宽"textAlign":"center", //文字水平居中显示1"lineHeight":"120px", //行高，文字垂直居中显示"background":"url(/icons/CrystalClear/128x128/actions/gohome.png)", //背景图片，这是房产标注的关键！"cursor":"pointer"});myMap.addOverlay(myLabel); //把label添加到地图上以上设置效果如图1添加自定义marker自定义marker图标样式默认为红色水滴形式下面代码为更改图标样式var iconSelf = new BMap.Icon('self.png', new BMap.Size(20, 32), { //设置图标显示图片anchor: new BMap.Size(10, 30)var mkrSelf = new BMap.Marker(new BMap.Point(116.250 + i * 0.01, 39.910), { //设置位置icon: iconSelf});myMap.addOverlay(mkrSelf); //添加到地图中设置效果如下默认图标如下添加maker监听鼠标放上事件及显示信息mkrSelf .addEventListener("mouseover", function(){var infoWin = new Window("Person" + i);//定义显示信息this.openInfoWindow(infoWin);});效果如下3。
React中使用百度地图API
React中使⽤百度地图API今天我们来搞⼀搞如何在React中使⽤百度地图API好吧，最近忙的头⽪发⿇，感觉⾝体被掏空，所以很久都没来写博客了，但今天我⼀定要来⼀篇好吧话不多说，我们直接开始好吧特别注意：该React项⽬是⽤create react app 创建的（以下所有操作都在该基础上进⾏）1.去百度地图登录/2.获取密钥 登录后在右上⾓的控制台⾥⾯申请（由于这个我早已申请过了，就不给⼤家演⽰了，⼤家照着它的提⽰⾛就可以了）3.拿到密钥后，将百度API的script引⼊到public下的index.html⽂件<script type="text/javascript" src="/api?v=2.0&ak=你的密钥"></script>4.去node_modules⽂件夹下找react-script>config>webpack.config.dev.js然后我们打开该⽂件添加⼀句话externals:{'BMap':'BMap',}5.到此我们已经可以在组件中愉快的使⽤百度地图API了，下⾯给个组件使⽤的实例import React,{Component} from 'react';import BMap from 'BMap';class AddressUi extends Component{render() {return(<div className="address" id="address"></div>)}componentDidMount(){var map = new BMap.Map("address"); // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中⼼点坐标和地图级别map.addControl(new BMap.MapTypeControl()); //添加地图类型控件map.setCurrentCity("北京"); // 设置地图显⽰的城市此项是必须设置的map.enableScrollWheelZoom();}}export default AddressUi对百度地图API的具体操作可参照官⽹/jsdemo.htm#i8_1特别注意：注意在react中使⽤百度地图的API时会传⼊⼤写的变量名，这时要使⽤window.变量名，来表明它是全局变量，不然会报错。
百度地图API应用实例说明文档
百度地图API百度地图API应用实例Michael Tian目录百度地图API (3)1基础知识 (3)1.1 百度地图 API 概念 (3)1.2 百度地图的“Hello, World” (3)1.2.1 引用百度地图API文件 (5)1.2.2创建地图容器元素 (5)1.2.3命名空间 (5)1.2.4创建地图实例 (5)1.2.5创建点坐标 (6)1.2.6 初始化地图 (6)1.2.7地图操作 (6)2应用示例 (6)2.1 Map类 (7)2.2 ExtJs (7)2.2.1 将百度地图嵌入到Ext中 (8)2.2.2 在Ext中显示百度地图 (10)2.3 向地图添加标注 (10)2.4 为标注添加信息窗口 (11)2.5 标注与数据列表的联动 (12)2.6 数据列表与标注的联动 (12)2.7 创建可拖拽的标注 (14)3折线 (14)3.1添加多边形 (14)3.2样式设置 (16)4自定义标注 (16)5 文本标注 (17)5.1 添加一个文本标注 (17)5.2 文本位置偏移值 (18)5.3 自定义Label (19)5.4 添加滑动门效果 (20)6参考资料 (21)百度地图API1基础知识1.1 百度地图 API 概念百度地图API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。
百度地图API不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。
1.2 百度地图的“Hello, World”开始学习百度地图API最简单的方式是看一个简单的示例。
以下代码创建了一个520x340<meta http-equiv="Content-Type"content="text/html; charset=gbk"/> <title>Hello, World</title><scriptsrc=/api?key=46ce9d0614bf7aefe0ba562f8cf87194 &v=1.0&services=false type="text/javascript"></script></head><body><div style="width: 520px; height: 340px; border: 1px solid gray"id="container"></div></body></html><script type="text/javascript">var map = new BMap.Map("container"); // 创建Map实例var point = new BMap.Point(116.404, 39.915); // 创建点坐标map.centerAndZoom(point,15); // 初始化地图，设置中心点坐标和地图级别。
百度lbs教程
百度lbs教程百度LBS（百度地图开放平台）是一个地理位置服务平台，提供了多种地图及地理位置相关的功能和服务，是开发者在自己的应用中集成地理位置信息的首选平台。
本文将为您详细介绍百度LBS的使用方法和相关教程。
百度LBS提供了多个API接口，包括地理编码、逆地理编码、路线规划、距离计算、地点检索等。
这些接口可以帮助开发者实现各种功能，比如地图显示、位置搜索、路径规划等。
在使用这些接口之前，需要开发者先申请百度LBS开发者密钥，并在应用中进行设置。
首先，我们来介绍一下地理编码和逆地理编码这两个API接口。
地理编码可以将地址转换为经纬度坐标，而逆地理编码则可以将经纬度坐标转换为地址。
开发者可以通过地理编码将用户输入的地址转换为具体的坐标，在地图上进行显示；而通过逆地理编码，可以将用户点击地图上的某一点的坐标转换为具体的地址信息。
接下来是路线规划和距离计算这两个API接口。
路线规划可以根据用户设定的起点和终点，计算出一条最佳路径，并显示在地图上。
开发者可以通过路线规划来为用户提供导航功能。
而距离计算则可以根据用户设定的起点和终点，计算出两点之间的距离，帮助用户了解两地之间的距离情况。
最后是地点检索这个API接口。
地点检索可以帮助用户在地图上搜索特定的地点信息。
用户可以通过关键字搜索、按照分类选择等方式来获取所需的地点数据。
开发者可以将地点检索功能集成到自己的应用中，提供给用户更便捷的地点搜索体验。
百度LBS提供了完善的开发文档和示例代码，开发者可以根据自己的需求进行开发。
在使用百度LBS之前，开发者需要先了解基本的HTML、JavaScript等web开发知识，并熟悉百度LBS相关的API接口和参数。
百度LBS还提供了多个SDK 供不同平台的开发者使用，包括Android、iOS、Web等，开发者可以根据自己的开发环境选择合适的SDK进行开发。
在实际开发过程中，开发者可以根据自己的需求进行代码的编写和调试。
JS使用百度地图API自动获取地址和经纬度操作示例
JS使⽤百度地图API⾃动获取地址和经纬度操作⽰例本⽂实例讲述了JS使⽤百度地图API⾃动获取地址和经纬度操作。
分享给⼤家供⼤家参考，具体如下：在实际⼯作中我们经常会遇到这样的问题，但是当我们去看百度API的时候往往⼜达不到我们的要求。
故此，本篇博⽂讲述如何使⽤百度地图API⾃动获取地址和经纬度：1、HTML代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>点击地图获取地址和经纬度map，address，lng，lat</title><meta name="robots" content="noindex, nofollow"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!-- 将百度地图API引⼊，设置好⾃⼰的key --><script type="text/javascript" src="/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script></head><body><div class="main-div"><form method="post" action="" name="theForm" enctype="multipart/form-data" onsubmit="return validate()"><table cellspacing="1" cellpadding="3" width="100%"><tr><td class="label">经度</td><td><input type="text" name="lng" id="lng" value=""/></td></tr><tr><td class="label">纬度</td><td><input type="text" name="lat" id="lat" value=""/></td></tr><tr><td class="label">地址</td><td><input type='text' value='' name='sever_add' id='sever_add' readonly><input type='button' value='点击显⽰地图获取地址经纬度' id='open'></td></tr></table></form><div id='allmap' style='width: 50%; height: 50%; position: absolute; display: none'></div></div></body></html>2、JS代码如下<script type="text/javascript">function validate() {var sever_add = document.getElementsByName('sever_add')[0].value;if (isNull(sever_add)) {alert('请选择地址');return false;}return true;}//判断是否是空function isNull(a) {return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false;}document.getElementById('open').onclick = function () {if (document.getElementById('allmap').style.display == 'none') {document.getElementById('allmap').style.display = 'block';} else {document.getElementById('allmap').style.display = 'none';}}var map = new BMap.Map("allmap");var geoc = new BMap.Geocoder(); //地址解析对象var markersArray = [];var geolocation = new BMap.Geolocation();var point = new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 12); // 中⼼点geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);map.enableScrollWheelZoom(true);}else {alert('failed' + this.getStatus());}}, {enableHighAccuracy: true})map.addEventListener("click", showInfo);//清除标识function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注function addMarker(point) {var marker = new BMap.Marker(point);markersArray.push(marker);clearOverlays();map.addOverlay(marker);}//点击地图时间处理function showInfo(e) {document.getElementById('lng').value = e.point.lng;document.getElementById('lat').value = t;geoc.getLocation(e.point, function (rs) {var addComp = rs.addressComponents;var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; if (confirm("确定要地址是" + address + "?")) {document.getElementById('allmap').style.display = 'none';document.getElementById('sever_add').value = address;}});addMarker(e.point);}</script>将js代码放⼊到html中，我们可以得到效果图如下：更多关于JavaScript相关内容还可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。
百度地图API基本使用（二）
百度地图API基本使⽤（⼆）本⽂系作者原创，转载请私信并在⽂章开头附带作者和原⽂地址链接。
违者，作者保留追究权利。
前⾔PS：我所使⽤的的是百度地图Javascript API 3.0本⽂是对之前使⽤的延续，继续对百度地图API的⼀些使⽤去做归纳和总结，本次主要是对地图上的覆盖物这块做介绍，如果有⼩伙伴没有看过之前的，可以先去观看⼀下，前期所需要的⼀些准备，以及⼀些基本的⽤法。
感兴趣的⼩伙伴可以⾃⾏查看百度地图官⽅提供的⽂档开发⽂档中的JavaScript API也可以通过下⽅⽰例中⼼更直观的看到百度地图API的⼀些使⽤，以及它的⼀些特性不过要注意：实例中⼼使⽤的是BMapGL去创建容器的，最新版GL地图命名空间为BMapGL, 可按住⿏标右键控制地图旋转、修改倾斜⾓度。
由于本次使⽤的是BMapGL所以在引⼊API的时候也不太⼀样引⼊⽅式如下：<script type="text/javascript" src="///api?type=webgl&v=1.0&ak=您的密钥"></script>好的，废话不多说，开整百度地图API-覆盖物在讲覆盖物之前，先给⼤家讲⼀下覆盖物的添加和删除的⽅法，这个是通⽤的，下⾯各种类型的覆盖的添加和删除的使⽤是⼀样的。
在我们获取到容器之后，根据⾃⼰的需求创建好⾃⼰的覆盖物对象之后，如果我们需要添加覆盖物的话，就可以使⽤容器对象.addOverlay(覆盖物对象);如果我们需要清除覆盖物的话，只需要使⽤容器对象.clearOverlays();就可以清除所有，但是如果只是想清除某⼀个覆盖物的话，我们需要使⽤容器对象.removeOverlays(覆盖物对象);代码⽰例如下://创建容器var map = new BMapGL.Map('allmap');var point = new BMapGL.Point(116.404, 39.915);map.centerAndZoom(point, 15);// 创建点覆盖物var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));//添加覆盖物map.addOverlay(marker);//删除具体覆盖物map.removeOverlays(marker);//删除所有覆盖物map.clearOverlays();1. 点覆盖物点覆盖物主要使⽤的是Marker这个⽅法，例如：var marker1 = new BMapGL.Marker(new BMapGL.Point(经度, 纬度));这样就创建好了⼀个点覆盖物对象，我们需要使⽤上⾯介绍的添加覆盖物的⽅法，将覆盖物添加到容器中，即容器对象.addOverlay(marker1)这样就实现了简单的点覆盖物，不过有的时候需要我们的覆盖物能够拖动，所以这个时候就要⽤到⼀个属性enableDragging，默认情况下是false,也就是说在上⾯的那些默认创建的⽅式这个属性都是false,这是属性字⾯意思也很好理解⽀持拖拽，所以如果有需要拖拽的需求，我们只需要将整个属性设置为true。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_PAN});
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("doint = new BMap.Point(120.365872,31.545238);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
var label = new bel(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
function createInfoWindow(i){
var json = markerArr[i];
var iw = new Window("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
</style>
<script type="text/javascript" src="/api?key=&v=1.1&services=true"></script>
</head>
<v style="width:500px;height:400px;border:#ccc solid 1px;" id="dituContent"></div>
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap(){
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
<meta name="descriptiotyle type="text/css">
html,body{margin:0;padding:0;}
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();ml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keyword
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
return icon;
}
initMap();//创建和初始化地图
</script>
</html>
2.3
只需要一个div,一个javascript引用和一个javascript块，如下
//div块
<div style="width:500px;height:400px;border:#ccc solid 1px;" id="dituContent"></div>
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_PAN});
var map = new BMap.Map("doint = new BMap.Point(120.365872,31.545238);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow