前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >百度地图如何创建一个属于自己的地图,附加到项目中?

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

作者头像
手撕代码八百里
发布2020-07-29 09:57:22
发布2020-07-29 09:57:22
2.8K00
代码可运行
举报
文章被收录于专栏:猿计划猿计划
运行总次数:0
代码可运行

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

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

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

可以看出官方给出了两个步骤: 第一步:创建地图 第二步:获取代码 特别的简单。动动鼠标,点点地图就可以做到了少写几百行代码的目的。name接下来咱们一起看一下从创建到在真实代码中是如何使用的。

二、创建地图

(一)定位中心点

代码语言:javascript
代码运行次数:0
运行
复制
定位中心点:这个功能就是执行了下面两个操作
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 很详细,去注册一下就好了。

测试

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/12/16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 创建地图-百度地图生成器
    • 一、打开百度地图生成器的网址
    • 二、创建地图
      • (一)定位中心点
      • (二)设置地图
      • (三)添加标注
    • 三、获取代码
    • 在ide中跑起来这个代码
    • 测试
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档