百度地图Javascript API实践小结

百度地图Javascript API实践小结

JavaScript API

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可以在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。一般来说我们需要先申请密钥(ak才可使用。

JavaScript API功能介绍

我们主要使用的功能有这些:

基本地图功能:展示(支持2D图、3D图、卫星图)、平移、缩放、拖拽等。

地图控件展示功能:可以在地图上添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件,并可以设置各类控件的显示位置。

覆盖物功能:支持在地图上添加/删除点、线、面、热区、行政区划、用户自定义覆盖物等;开源库提供富标注、标注管理器、聚合marker、自定义覆盖物等功能。

定位功能:支持IP定位及浏览器(支持html5特性浏览器)定位功能。

鼠标交互功能:支持动态修改鼠标样式、鼠标拖拽/缩放地图及鼠标绘制等功能。

/地理编码:支持百度坐标与地址描述信息之间的转换服务。

获取JavaScript API服务方法

1.页面嵌入脚本引用方式:

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

2.异步加载方式:

可以在动态在页面引用脚本,同时添加callback参数,当脚本加载完成后callback函数会被立刻调用:

<script type="text/javascript">  

function initialize() {  

  var mp = new BMap.Map('map');  

  mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);  

}  

function loadScript() {  

  var script = document.createElement("script");  

  script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize";

  document.body.appendChild(script);  

}  

window.onload = loadScript;  

</script>  

百度地图的简单例子

<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Hello, World</title> 

<style type="text/css"> 

html{height:100%} 

body{height:100%;margin:0px;padding:0px} 

#container{height:100%} 

</style> 

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

</script>

</head> 

<body> 

<div id="container"></div>

<script type="text/javascript">

var map = new BMap.Map("container");          // 创建地图实例 

var point = new BMap.Point(116.404, 39.915);  // 创建点坐标 

map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别 

</script> 

</body> 

</html>

这里,我们一共进行了准备页面、引用百度地图API文件、创建地图实例、创建点坐标、地图初始化。

地图控件概述

百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件,您还可以通过Control类来实现自定义控件。

地图API中提供的控件有:

Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。

NavigationControl:地图平移缩放控件PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。移动端提供缩放控件,默认位于地图右下方。

OverviewMapControl缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。

ScaleControl比例尺控件,默认位于地图左下方,显示地图的比例关系。

MapTypeControl地图类型控件,默认位于地图右上方。

CopyrightControl版权控件,默认位于地图左下方。

GeolocationControl定位控件,针对移动端开发,默认位于地图左下方。

向地图添加控件

可以使用Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如,要将标准地图控件添加到地图中,可在代码中添加如下内容:

var map = new BMap.Map("container");   

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);   

map.addControl(new BMap.NavigationControl());

可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后,它们即刻生效。

map.addControl(new BMap.NavigationControl());   

map.addControl(new BMap.ScaleControl());   

map.addControl(new BMap.OverviewMapControl());   

map.addControl(new BMap.MapTypeControl());   

map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用

地图覆盖物

可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物



回复列表



回复操作






发布时间:2016-06-21 17:19:44

修改时间:2016-06-21 17:19:44

查看次数:982

评论次数:4

TA的文章总数

37