详解地图开发

最新推荐文章于 2023-08-29 13:00:00 发布

影之歌NO1

最新推荐文章于 2023-08-29 13:00:00 发布

阅读量1.7k

点赞数

文章标签： JavaScript 地图开发地图 API

本文链接：https://blog.csdn.net/nbu00319/article/details/8833262

版权

地图开发

1．首先我们看怎么获取API

通过地址http://api.map.baidu.com/api 加载API：

<scriptsrc="http://api.map.baidu.com/api?key=您的API 密钥&v=版本&services=true 或者false" type="text

/javascript"></script>

其中参数key 为密钥，您可以在http://developer.baidu.com/map/apply-key.htm申请。参数v 为当前API的版本号，目前最新版本为1.3，services 参数表示是否加载服务部分，true 表示加载，false 表示不加载。

2．第一个实例

现在我们看看第一个实例”Hello word”

<!DOCTYPE html>

<html>

<head>

<title>Hello, World</title>

</head>

<body>

</body>

</html>

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

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

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

</script>

下面我们来逐步分析代码程序

1. 我们引用地图API文件

2. 创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上，这里我们创建了一个div元素，注意：一定要给这个元素给个id属性值

3. 命名空间

API使用BMap作为命名空间，所有类均在改命名空间下，比如：BMap.Map， BMap.Control.

4. 创建地图实例

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

位于BMap 命名空间下的Map 类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id 也可以是元素对象。

注意在调用此构造函数时应确保容器元素已经添加到地图上。

5. 创建点坐标

var point = new BMap.Point(116.404, 39.915);

这里我们使用BMap 命名空间下的Point 类来创建一个坐标点。Point 类描述了一个地理坐标

点，其中116.404表示经度，39.915表示纬度。

6. 地图初始化

map.centerAndZoom(point,15);

在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中

心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。

3．地图的操作

地图被实例化并完成初始化以后，就可以与其进行交互了。API 中的地图对象的外观与行为

与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。

您也可以修改配置来改变这些功能。

您还可以通过编程的方式与地图交互。Map 类提供了若干修改地图状态的方法

1. 下面这个实例显示一个地图，在等待两秒后会重新回到地图的中点。如果移动距离过大则地图直接跳到该点。

Varmap = new BMap.Map("container");

var point = newBMap.Point(116.404, 39.915);

map.centerAndZoom(point, 15);

window.setTimeout(function(){

map.panTo(newBMap.Point(116.409, 39.918));

}, 2000);

</script>

2 地图控件

我们经常可以看到地图中有一个小控件，这个控件可以改变地图显示程度。百度地图API中提供了丰富的控件，你可以自己动手做一个漂亮的控件

地图API中提供的控件有：

NavigationControl：地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩

放的功能。

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

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

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

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

map.centerAndZoom(newBMap.Point(116.404, 39.915), 11);

map.addControl(newBMap.NavigationControl());

</script>

添加控件我们可以用map.addControl()来实现。

3 . 覆盖物

所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折

线和多边形)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会

相应的移动。

地图API 提供了如下几种覆盖物：

Overlay：覆盖物的抽象基类，此类不可实例化，所有的覆盖物均继承此类的方法。

Marker：标注表示地图上的点，可自定义标注的图标。

Label：表示地图上的文本标注，您可以自定义标注的文本内容。

Polyline：表示地图上的折线。

Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜

色。

InfoWindow：信息窗口也是一种特殊的覆盖物。注意：同一时刻只能有一个信息窗口在地

图上打开。

可以使用BMap.Map.addOverlay() 方法向地图添加覆盖物，使用

BMap.Map.removeOverlay()方法移除覆盖物，注意此方法不适用于InfoWindow。

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

var point = newBMap.Point(116.404, 39.915);

map.centerAndZoom(point, 15);

varmarker = newBMap.Marker(point); // 创建标注

map.addOverlay(marker); // 将标注添加到地图中

</script>

标注表示地图上的点。API 提供了默认图标样式，您也可以通过Icon类来指定自定义图标。

BMap.Marker 的构造函数的参数为BMap.Point 和BMap.MarkerOptions（可选）。注意：

当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon

的offset 属性修改标定位置。

1. 信息窗口

信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，

也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。您可以使用

BMap.InfoWindow 来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于

打开状态。

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

var point = newBMap.Point(116.404, 39.915);

var marker = newBMap.Marker(point);

var opts = {

width : 250, // 信息窗口宽度

height: 100, // 信息窗口高度

title : "Hello" // 信息窗口标题

}

map.centerAndZoom(point, 15);

map.addOverlay(marker);

var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象

marker.addEventListener("click", function(){

this.openInfoWindow(infoWindow);

});

5右键菜单

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

var point = new BMap.Point(116.404, 39.915);

var menu = new BMap.ContextMenu();

var txtMenuItem = [

{

text:'放大',

callback:function(){map.zoomIn()}

{

text:'缩小',

callback:function(){map.zoomOut()}

}

];

for(var i=0; i < txtMenuItem.length; i++){

menu.addItem(newBMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));

}

map.centerAndZoom(point,15);

map.addContextMenu(menu);

</script>

6工具条实例

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

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

var myPushpin = newBMap.PushpinTool(map); // 创建标注工具实例

myPushpin.addEventListener("markend", function(e){

alert("您标注的位置：" +e.marker.getPosition().lng + ", " + e.marker.getPosition().lat);

});

myPushpin.open();

</script>

7服务实例

周边搜索

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

map.centerAndZoom(newBMap.Point(116.404, 39.915), 11);

var local = new BMap.LocalSearch(map, {

renderOptions:{map: map, autoViewport:true}

});

local.searchNearby("小吃", "前门");

</script>

驾车方案选择

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

map.centerAndZoom(newBMap.Point(116.404, 39.915), 12);

map.enableScrollWheelZoom();

var start = "魏公村" ,end = "百度大厦",routePolicy =[BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];

var arrInput = document.getElementById("dvPolicy").getElementsByTagName("input");

search(start,end,routePolicy[0]);

document.getElementById("dvPolicy").onclick = function(e){

e = e || window.event;

var elem = e.srcElement || e.target , policyIndex;

if(elem.tagName.toLowerCase() == "input"){

policyIndex = elem.getAttribute("id").replace("policy","");

map.clearOverlays();

search(start,end,routePolicy[policyIndex]);

}

function search(start,end,route){

var transit = new BMap.DrivingRoute(map, {

renderOptions: {map: map,panel:"results"},

policy: route

});

transit.search(start,end);

}

</script>

IP定位

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

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

map.centerAndZoom(point,15);

function myFun(result){

var cityName = result.name;

map.setCenter(cityName);

alert(cityName);

}

var myCity = new BMap.LocalCity();

myCity.get(myFun);

</script>

影之歌NO1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
详解地图开发

地图开发1．首先我们看怎么获取API通过地址http://api.map.baidu.com/api加载API：您的API密钥&v=版本&services=true或者false" type="text/javascript">其中参数key为密钥，您可以在http://developer.baidu.com/map/apply-key.htm申请。参数v
复制链接

扫一扫