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

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

作者头像
手撕代码八百里
发布2020-07-29 09:57:22
2.3K0
发布2020-07-29 09:57:22
举报
文章被收录于专栏:猿计划猿计划

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

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

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

在这里插入图片描述
在这里插入图片描述

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

二、创建地图

(一)定位中心点

代码语言:javascript
复制
定位中心点:这个功能就是执行了下面两个操作
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中跑起来这个代码
          • 测试
          相关产品与服务
          容器服务
          腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档