如何在网页中调用百度地图api
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在网页中调用百度地图api相关的知识，希望对你有一定的参考价值。
如何创建一个网页文件怎样利用百度地图API建立一张2D地图，以及3D地图
如何添加对地图进行鼠标和键盘操作的功能
-------------------------------------------------------------------------------------------------------------------
一、创建网页文件
粘贴以下代码至记事本中，保存文件为bank1-1.htm文件。
点击这里运行程序。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地图API学习</title>
</head>
<body>
在这里填入你的地图程序
</body>
</html>
二、使用百度地图API建立一张简单的地图
1、引用API的js，放置bank1-1.htm的<head></head>中
说明：
v=1.1这是API的版本，表明是1.1版本的。
sercices=false是指，不开启地图服务，例如公交驾车查询等。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>
2、设置地图容器的样式，放置<head></head>中
说明：
制定容器高度后，方能显示出地图。
<style type="text/css">
htmlheight:100%
bodyheight:100%;margin:0px;padding:0px
#milkMapheight:100%
</style>
你还可以自己规定容器的高度、宽度，边框颜色等。比如
<style type="text/css">
htmlheight:100%
bodyheight:100%;margin:0px;padding:0px
#milkMapheight:400px;width:600px;border:1px solid blue;
</style>
3、在<body></body>中放置地图容器
说明：id号是唯一的，在创建地图的js中，要与此id对应起来。
<div id="milkMap"></div>
4、在</body></html>中放置自己的js
说明：
创建地图使用new BMap.Map，创建点使用new BMap.Point。
创建地图需要设置地图中心点，与地图级别。1级最大，能看见全球；18级最小，最详细。
其中地图级别的对应关系为，4级-国； 8级-省， 12级-市， 18级-街道。
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
</script>
4、一张2D地图就创建完毕了。接下来，你可以运行你的地图程序。
点击这里运行程序。
三、制作3D地图
说明：
说明：
使用 BMAP_PERSPECTIVE_MAP 使地图变成3D类型。设置3D地图，需要首先setCurrentCity，设置当前城市。
目前，只支持北上广深四个城市的3D图。
点击这里运行程序。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地图API学习</title>
<style type="text/css">
htmlheight:100%
bodyheight:100%;margin:0px;padding:0px
#milkMapheight:400px;width:600px;border:1px solid blue;
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>
</head>
<body>
<div id="milkMap"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地图类型为3D地图
map.setCurrentCity("北京市"); //设置当前城市
</script>
</html>
四、添加对地图进行鼠标和键盘操作的功能
开启滚轮缩放功能，该功能默认是禁用的。
关闭双击放大功能,该功能默认是开启的。
enableScrollWheelZoom(); //开启滚轮缩放功能
disableDoubleClickZoom(); //关闭双击放大功能
开启键盘操作功能，该功能默认禁用。
键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。
enableKeyboard(); //开启键盘操作功能
下面我们来看一下完整的程序。点击这里运行程序。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地图API学习</title>
<style type="text/css">
htmlheight:100%
bodyheight:100%;margin:0px;padding:0px
#milkMapheight:400px;width:600px;border:1px solid blue;
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>
</head>
<body>
<div id="milkMap" style="float:left;"></div>
<div style="float:right;width:400px;">
<p>开启滚轮缩放</p>
<p>关闭双击放大</p>
<p>开启键盘操作</p>
<p>说明:键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。</p>
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地图类型为3D地图
map.setCurrentCity("北京市"); //设置当前城市
map.enableScrollWheelZoom(); //开启滚轮缩放功能
map.disableDoubleClickZoom(); //关闭双击放大功能
map.enableKeyboard(); //开启键盘操作功能
</script>
</html> 参考技术A 进入:http://dev.baidu.com/wiki/static/map/API/tool/creatMap/ （创建地图-百度地图API所见即所得工具，百度官方地址，大家放心使用）
切换城市，搜索需标注位置。（如下图：）
设置地图：大家可以对网站显示地图的宽高进行设置，其余选项不动。
添加标注：点击第一个图标后，在右侧找到自己的位置，单击鼠标左键可定位。标记图标处可更换图标形状，名称和备注填入位置相关信息。（如下图：）
步骤阅读
完成以上4步后，点获取代码。本回答被提问者和网友采纳
如何调用百度地图API
参考技术A如何调用百度地图API
1）下载百度地图移动版API(Android)开发包
要在Android应用中使用百度地图API，就需要在工程中引用百度地图API开发包，这个开发包包含两个文件：baidumapapi.jar和libBMapApiEngine.so。
2）申请API Key 和使用Google map api一样，在使用百度地图API之前也需要获取相应的API Key。百度地图API Key与你的百度账户相关联，因此您必须先有百度帐户，才能获得API
Key；并且，该Key与您引用API的程序名称有关。
百度API Key的申请要比Google的简单多了，其实只要你有百度帐号，应该不超过30秒就能完成API Key的申请。
3）创建一个Android工程
这里需要强调一点：百度地图移动版api支持Android 1.5及以上系统，因此我们创建的工程应基于Android SDK 1.5及以上。 工程创建完成后，将baidumapapi.jar和libBMapApiEngine.so分别拷贝到工程的根目录及libs/armeabi目录下，并在工程属性->Java Build Path->Libraries中选择“Add JARs”，选定baidumapapi.jar，这样就可以在应用中使用百度地图API了。工程完整的目录结构如下图所示：
4）在布局文件中添加地图控件(res/layout/main.xml)
5）创建Activity继承.baidu.mapapi.MapActivity
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import .baidu.mapapi.BMapManager;
import .baidu.mapapi.GeoPoint;
import .baidu.mapapi.MapActivity;
import .baidu.mapapi.MapController;
import .baidu.mapapi.MapView;
public class MainActivity extends MapActivity
private BMapManager mapManager;
private MapView mapView;
private MapController mapController;
@Override
public void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
初始化MapActivity
mapManager = new BMapManager(getApplication());
init方法的第一个参数需填入申请的API Key
mapManager.init("285B415EBAB2A92293E85502150ADA7F03C777C4", null);
super.initMapActivity(mapManager);
mapView = (MapView) findViewById(R.id.map_View);
设置地图模式为交通地图
mapView.setTraffic(true);
设置启用内置的缩放控件
mapView.setBuiltInZoomControls(true);
用给定的经纬度构造一个GeoPoint（纬度，经度）
GeoPoint point = new GeoPoint((int) (47.118440 * 1E6), (int) (87.493147 * 1E6));
创建标记maker
Drawable marker = this.getResources().getDrawable(R.drawable.iconmarka);
为maker定义位置和边界
marker.setBounds(0, 0, marker.getIntrinsicWidth(), marker.getIntrinsicHeight());
取得地图控制器对象，用于控制MapView
mapController = mapView.getController();
设置地图的中心
mapController.setCenter(point);
设置地图默认的缩放级别
mapController.setZoom(12);
@Override
protected boolean isRouteDisplayed()
return false;
@Override
protected void onDestroy()
if (mapManager != null)
mapManager.destroy();
mapManager = null;
super.onDestroy();
@Override
protected void onPause()
if (mapManager != null)
mapManager.s();
super.onPause();
@Override
protected void onResume()
if (mapManager != null)
mapManager.start();
super.onResume();
6）在AndroidManifest.xml中配置
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="
package=".liufeng.baidumap"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".MainActivity" android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="4" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
</manifest>
7）运行结果
方法/步骤
1
在百度搜索框输入“百度地图api”查找到百度地图api的网站。如下图：
2
进入到上图的百度地图api首页。如下图：
3
把网页滚动到下面可以看见“申请密钥”功能，如下图：
4
点击“申请密钥”按钮，进入登陆界面。没有百度帐号则注册一个。注册后继续跳到登录界面。如下图：
5
成功登录则进入后台管理界面。如下图：
6
点击创建应用，则跳到创建应用界面。如下图：
7
填写好信息后。点击确认按钮则生成生成一个密钥。界面会调转到列表管理页面。访问应用(AK)这一列的值就是你的密钥。如下图：
8
接下来就可以在网页上调用了。如下图：
9
接下来是不是想写个简单的调用地图功能呢？调用地图api的demo，百度地图给我们提供很多demo。
以上是关于如何在网页中调用百度地图api的主要内容，如果未能解决你的问题，请参考以下文章