百度地图API实现地图应用

企业官网上需要用到地图应用，这里对百度地图API的使用做点笔记，好记性不如烂笔头。

实现地图应用的流程如下：

1、获取密钥；教程网址 https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html

2、在html的head头部引入百度地图的API，如

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

3、根据API文档创建容器、绘制地图、添加各种控件。详细如下代码

<div id="mapContainer" style="width:500px;height:400px;border:1px solid gray;"></div>

<script>
function initialize() {
//创建地图实例
var map = new BMap.Map('mapContainer');  //地图渲染到了id="mapContainer"的DOM元素上
//创建一个坐标
var point =new BMap.Point(113.946567,22.531604);
//地图初始化，设置中心点坐标和地图级别
map.centerAndZoom(point,14);
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));  //替换掉标注的图片
var marker = new BMap.Marker(point,{icon: myIcon}); 　　　　　 // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
//map.enableKeyboard(); // 启用键盘操作。
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl({
anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角
offset : new BMap.Size(290,10) //进一步控制缩放按钮的水平竖直偏移量
})); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl({isOpen:true})); //添加缩略地图控件
map.addControl(new BMap.MapTypeControl( {
anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角
offset : new BMap.Size(160,10) //进一步控制缩放按钮的水平竖直偏移量
})); //地图类型
var label = new BMap.Label("深圳赛动生物自动化有限公司",{offset:new BMap.Size(15,-20)});
marker.setLabel(label); //添加公司label
}window.onload = initialize;
</script>

开发中遇到的一些问题的记录：

1、如何获取目标点的坐标点（地图中心点，比如公司位置坐标）？？百度地图提供了一个坐标拾取器工具界面，可以参考使用教程获取：https://jingyan.baidu.com/article/f96699bbafdccc894e3c1b8b.html

2、默认是没有鼠标滚动缩放大小、平移缩放、缩略地图、比例尺、标注、三维地图类型等功能，需要如上述代码分别添加。

3、如何隐藏左下角地图的版权信息？？如下

<style>.anchorBL{display:none;}</style>

4、在标注旁显示公司名的标注，更换标注的图标

var label = new BMap.Label("深圳赛动生物自动化有限公司",{offset:new BMap.Size(15,-20)});
marker.setLabel(label); //添加公司labelvar myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
var marker2 = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker2);

5、右下角的缩略地图是折叠的，怎么保持常开？？

map.addControl(new BMap.OverviewMapControl({isOpen:true})); //添加缩略地图控件

6、百度离线地图开发待完善？？

百度地图API使用官网：http://lbsyun.baidu.com/index.php?title=jspopular/guide/maplayer

网络教程参考网址：https://www.cnblogs.com/yfsmooth/p/4695831.html

这里附加一个迅速地图实现的工具：http://api.map.baidu.com/lbsapi/creatmap/index.html 可以直接配置参数获取代码

百度地图API实现地图应用相关推荐

php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
python + 高德地图API实现地图找房
python + 高德地图API实现地图找房项目简介:根据工作地点信息和58同城爬取的租房信息,通过高德地图进行显示,同时利用高德API自动规划房源到工作地点的通勤路线(公交+地铁) 项目仓库:ht ...
Android中应用百度地图API开发地图APP实例-显示百度地图
场景效果在使用百度地图API之前需要先在百度地图开放平台中申请API_KEY http://lbsyun.baidu.com/index.php 申请API_KEY 登录百度开放平台后找到控制台下 ...
android应用控制百度地图,Android中应用百度地图API开发地图APP实例-显示百度地图...
场景效果在使用百度地图API之前需要先在百度地图开放平台中申请API_KEY 申请API_KEY 登录百度开放平台后找到控制台下的应用管理-创建应用依次输入应用名,应用类型选择Android S ...
使用百度地图API实现地图生成、标记以及标注
首先你需要引入一段javaScript <script type="text/javascript" src="http://api.map.baidu.com/a ...
调用百度地图api实现地图查询功能
百度地图api功能强大,进入百度地图api平台之后首先需要注册申请一个ak码(其实就是权限码),通过审核之后就可以参考api提供的例子进行自定义的地图开发功能了. 在这里提供两个本人写好的地图查询功能 ...
centerandzoom 无效_Django调用百度地图api在地图上批量增加标记点
在调用百度地图api进行web开发时遇到了一个需求,我们需要在网页中内嵌一个div 然后在div中调用百度地图的js显示我们所需要的地区.根据需求坐标在地图上添加若干个标记点,并批量的为各个标记点设置 ...
详解百度地图API之地图标注
本文将向大家介绍百度地图API的标注(Marker)的使用方法和一些实现细节. 标注概述标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息.比如你在西单商场位置添加了一个 ...
百度地图API限制地图范围，拖拽出区域自动弹回
前段时间迭代了地图功能,需要把地图限制在太湖这个范围内,就是不要让用户的地图停留在这以外的区域,网上找了不少资料都没有能完全实现这个功能的(仅仅限制边界并且禁止拖拽的话放大了也无法拖拽了),自己动手写 ...

百度地图API实现地图应用

百度地图API实现地图应用相关推荐

最新文章

热门文章