百度地图如何创建一个属于自己的地图,附加到项目中?

简介: 百度地图如何创建一个属于自己的地图,附加到项目中?

创建地图-百度地图生成器

一、打开百度地图生成器的网址

网址:http://api.map.baidu.com/lbsapi/creatmap/

可以看出官方给出了两个步骤:

第一步:创建地图

第二步:获取代码

特别的简单。动动鼠标,点点地图就可以做到了少写几百行代码的目的。name接下来咱们一起看一下从创建到在真实代码中是如何使用的。

二、创建地图

(一)定位中心点

定位中心点:这个功能就是执行了下面两个操作
var map = new BMap.Map("map");//在百度地图容器中创建一个地图
var point = new BMap.Point(117.19564,36.682652);//定义一个中心点坐标

可以选择当前的城市,也可以输入一个比较详细的地点,也可以用鼠标拖动地图来选择合适的位置。

注意:地图的级别可以由滚动鼠标来决定

(二)设置地图

可以设置地图的尺寸,也可以调整地图上的控件的位置以及默认显示的状态等。很方便,可以根据自己的需求来设定。

(三)添加标注

在线创建的标注支持三种方式,如下面三个图

咱们来添加一个坐标测试下

输入一些描述

点击后:

也可以添加多个

预览

预览时的图片可能存在问题,先忽略吧

三、获取代码

点击获取代码

复制下来弹出的代码

在ide中跑起来这个代码

把代码复制到ide创建的html中

如果没有这个key的童鞋可以看这篇:

https://blog.csdn.net/qq_17623363/article/details/103234119

很详细,去注册一下就好了。

测试

然后就可以成功的看到结果了:

目录
相关文章
|
9月前
|
安全 程序员 定位技术
程序员必知:地图显示的步骤
程序员必知:地图显示的步骤
107 8
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
338 0
|
移动开发 JavaScript 前端开发
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
256 0
|
10月前
|
JSON 定位技术 数据格式
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
96 0
|
10月前
|
JavaScript 前端开发 定位技术
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(上)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
100 0
|
前端开发 定位技术
地图开发实战案例:高德地图的标注、信息窗口的实战实例
地图开发实战案例:高德地图的标注、信息窗口的实战实例
205 0
|
搜索推荐 JavaScript 定位技术
百度地图绘制地区的棱柱效果-定位-自定义点-文本标记-信息弹窗
百度地图绘制地区的棱柱效果-定位-自定义点-文本标记-信息弹窗
277 0
|
XML JSON 数据可视化
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)
625 0
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)
|
数据可视化 定位技术
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)2
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)
597 0
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)2

热门文章

最新文章