百度地图API基本使用（一）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图API基本使用（一）相关的知识，希望对你有一定的参考价值。
参考技术A由于最近项目有需要，所以最近开始研究百度地图API的使用，简单的介绍一下 百度地图JavaScript API 它的使用，希望能够对小伙伴们有所帮助，后续有机会再做深入的研究。
有兴趣的小伙伴可以自行查找百度地图API
百度地图开放平台开发文档中的javascript API
在使用百度地图之前，我们需要拥有一个自己的百度账号，申请注册成为百度开发者，然后我们需要创建一个浏览器端应用，就可以获取到一个唯一的服务秘钥（AK）
申请秘钥（AK）
最终html中的内容如下:
实现效果如下：可以进行移动和放大
根据id去获取对应的元素就是我们后续百度地图所要去填充的元素，其实创建容器的时候还有一个coordsType属性去控制坐标的类型，不过我们不配置的话一般都是默认配置为5也就是bd0ll坐标类型， 感兴趣的小伙伴可以去看一看这些坐标类型都有哪些？可以来评论区交流学习
有两种设置中心点的方式，一种是通过上面那样根据经纬度去设置中心点坐标，第二种就是根据城市名作为中心点
Ps：map是我们的容器不要忘了
1.初始化地图时，进行关闭配置
2.使用地图的方法进行配置
1.地图初始化
添加控件前，地图需要进行初始化。例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：
2.添加多个控件
在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。
初始化控件时，可提供一个可选参数，其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置，即控件停靠在地图的哪个角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整自己的位置。
个性化地图样式编辑器
通过样式ID调用个性化地图样式（推荐）
1.创建个性化地图样式
进入地图开放平台控制台页面，在我的地图中，创建一个地图样式：
2.编辑样式
点击创建的地图样式，进入样式编辑器，根据您的需求自由编辑地图样式：
3.发布样式并获取样式ID
完成编辑后，在我的地图或者编辑器中发布该地图样式，获取发布后生成的样式ID：
4.在JavaScript API中应用地图样式
将第三步中获取的样式ID作为setMapStyleV2方法的参数。
相关代码如下：
注意：
1.使用个性化地图前，请参考Hello World构建基础地图；
2.setMapStyleV2方法需要在地图初始化（centerAndZoom）完成后执行；
3.样式更新不会改变样式ID。因此如果有更新样式的需求，重新编辑发布就可以完成更新。不需要修改JavaScript API调用代码；
4.如果样式ID在控制台中被删除，但JavaScript API还在继续调用。那么将会渲染默认样式的地图；
通过样式JSON调用个性化地图样式
1.获取样式JSON
前序流程和样式ID调用地图样式流程一致，进入我的地图，创建一个地图样式，进入编辑器编辑完成后，直接通过编辑器中的“下载JSON”功能获取JSON代码：
2.在JavaScript API中应用地图样式
将上一步中获取的样式JSON作为setMapStyleV2方法的参数。
相关代码如下：
设置后地图效果如下:
上面这些都是一些简单的使用，后续我在使用的过程中遇到的一些问题以及解决过程，新的API的使用会持续更新分享，百度地图的API开发文档给的还是很全面的，不过就是目前他提供的都是一些在线开发，对于一些内网的公司就不太友好了，所以后续这块我需要去做一下离线开发的研究，等我把离线地图开发弄好之后，再给大家分享。
感谢诸君的观看，文中如有纰漏，欢迎在评论区来交流。如果这篇文章帮助到了你，欢迎点赞和关注。
百度地图API——多点路径连线问题
本文系作者 chaoCode原创，转载请私信并在文章开头附带作者和原文地址链接。
违者，作者保留追究权利。
前言
本文是对于在项目应用有遇到的多点连线问题，我的一些解决方式，以及对于之前所学习的一些百度地图API基本使用的一个小结。
如果有小伙伴没有看过之前的百度地图API基本使用（一）｜8月更文挑战，百度地图API基本使用（二）｜8月更文挑战，百度地图API基本使用（三）,可以先去观看一下，前期所需要的一些准备，以及一些基本的用法。
感兴趣的小伙伴可以自行查看百度地图官方提供的文档
百度地图开放平台开发文档中的JavaScript API
也可以通过下方示例中心更直观的看到百度地图API的一些使用，以及它的一些特性
百度地图开放平台-示例中心
想深入研究百度地图avaScript API 3.0方法参数信息的话，可以通过下方类参考
百度地图avaScript API v3.0类参考
另外不同版本的API可以自行在开发文档中的类参考类目中找到,请自行查找
应用场景：
简单来说就是点覆盖物需要自定义图片，以及实现点击点覆盖物实现多点路径连线并且添加顺序编号。以及将这些数据返回到后端入库。以及根据后端数据进行回显操作
好的根据我所描述的这个需求，我们就可以回想之前学习的百度地图API，有哪些在这里是我们所需要的。
1.百度地图API基本使用（一）｜8月更文挑战中的创建加载地图。
2.百度地图API基本使用（二）｜8月更文挑战中的创建点覆盖物，点覆盖单击事件。
3.百度地图API基本使用（三）中的路线规划模块中讲的一些连线操作
回想了一下我们所需要的知识点，那么我们开始进入实操阶段。
1.创建和加载地图。
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.399, 39.910), 15);
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.NavigationControl());
2.举个例子随便给了4个点，然后这个时候需要修改点覆盖物的图片，并添加点击事件。
3.由于我们是要通过点击点覆盖物去实现，路线规划陆续连接起来，所以讲路线规划放在了点击事件中。本次使用的是
WalkingRoute，也就是步行路线规划导航实例。
目前这个还有一些纰漏，简单的实现，如果小伙伴们有更好的方案，可以评论区交流学习。
var PonitData = [ [116.404, 39.94],[116.404, 39.95],[116.404, 39.96],[116.404, 39.97]];
//总的点击点覆盖集合
var plan_points=[];
//两个点连线的集合，每次连完线之后，留下后一个
var points =[];
//使用each去循环渲染点覆盖物
$.each(PonitData, function (item, value) {
var point =new BMap.Point(value[0], value[1]);
//自定义图片var myIcon = new BMap.Icon(图片路径, new BMap.Size(23, 25), {});
var myIcon = new BMap.Icon("images/marker.png", new BMap.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
//anchor: new BMap.Size(23, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
//imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point);
marker.setIcon(myIcon);
map.addOverlay(marker);
//给点覆盖物添加点击事件
marker.addEventListener("click", function (e)
{
var planPointFlage=false;
if (plan_points.length>0){
$.each(plan_points, function (item, value) {
console.log(value);
if (value.lng==point.lng && value.lat==point.lat){
planPointFlage = true;
planPonitIndex=item;
}
});
}
var pointFlage=false;
if (points.length>0) {
$.each(points, function (item, value) {
if (value.lng == point.lng && value.lat == point.lat) {
pointFlage = true;
}
});
}
if(!planPointFlage){
plan_points.push(point);
if(!pointFlage){
points.push(point);
}
//点击点的时候获取点在数组中所在的位置
var planPonitIndex=-1;
if (plan_points.length>0){
$.each(plan_points, function (item, value) {
if (value.lng==point.lng && value.lat==point.lat){
planPonitIndex=item;
}
});
}
//配置label显示为该点覆盖物在数组中的下标+1，表示这个点是第几个，以及点坐标，字的位置。
var lab1 = new BMap.Label(planPonitIndex + 1, { position: point, offset: new BMap.Size(-7, -12) });
//配置label的一些样式
lab1.setStyle({
color: "#fff",
fontSize: "16px",
backgroundColor: "0.05",
border: "0",
fontWeight: "bold"
});
marker.setLabel(lab1);
map.addOverlay(marker);
//禁用自动调整地图层级
walking.disableAutoViewport();
var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });
if (points.length === 2) {
var start =points[0];
var end = points[1];
//设置自定义图片，覆盖掉路线规划的时候的起点和重点图片，使用的是和点覆盖物一样的图片
var startIcon = new BMap.Icon("images/marker.png", new BMap.Size(23, 25));
walking.setMarkersSetCallback(function(result){
//覆盖起点的图片
result[0].marker.setIcon(startIcon);
//覆盖终点
result[1].marker.setIcon(startIcon);
});
//发起检索
walking.search(start, end);
//两个点连线的集合置空
points = [];
//添加最后一个进入数组
points.push(end);
}
}
});
感兴趣的小伙伴可以自行去研究,或者在评论区提问交流。
百度地图Javascript API 3.0 出行路线规划
百度地图JS API示例 路线规划
百度地图avaScript API v3.0类参考
感谢诸君的观看，文中如有纰漏，欢迎在评论区来交流。如果这篇文章帮助到了你，欢迎点赞 以上是关于百度地图API基本使用（一）的主要内容，如果未能解决你的问题，请参考以下文章