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

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

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

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

e96cdd3de2a5794175d37ee14b15940d.png

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

第一步:创建地图

第二步:获取代码

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

二、创建地图

(一)定位中心点

定位中心点:这个功能就是执行了下面两个操作

var map = new BMap.Map("map");//在百度地图容器中创建一个地图

var point = new BMap.Point(117.19564,36.682652);//定义一个中心点坐标

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

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

434a4570f9f0e2759717d1de70f98db4.png

(二)设置地图

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

9b70b65242a56d5042560ba3a0c9d116.png

(三)添加标注

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

40525923db02bf126334d4d3eeaafdae.png

8526dad8b84f0616636589cace8a1c0b.png

44996a672118d9639840541f16d1d4c0.png

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

8c1ca48712501894511ff089bf764852.png

输入一些描述

69ebc8812d0b66e3c401150b6bc96728.png

点击后:

c7df339fcaf0f65bad7ab86ca945a8f8.png

也可以添加多个

a3cf26d41daa4b5f0e1a48fdc0aa6b46.png

预览

906503d98a322b02095a7952a8f52975.png

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

a960ee13f9b91ebb20828429cb842367.png

三、获取代码

点击获取代码

4b8342bb29b1b562a3a96c6fcb6db970.png

复制下来弹出的代码

6b3d4a6f0c56a37bd30c0ec6b800d63d.png

在ide中跑起来这个代码

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

53a4848cf7081871704df5ca2a079697.png

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

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

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

测试

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

629cd3d6331dd9287f1365bf401ed13c.png

本文分享 CSDN - TrueDei。

如有侵权,请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值