怎么在网页中嵌入百度地图
怎么在网页中嵌入百度地图
学习啦【电脑技巧】 编辑：楚焕
　　怎么在网页中嵌入百度地图?想在网页中插入百度地图，该怎么办呢?下面小编分享一下在网页中插入百度地图的代码，需要的朋友可以来看看哦!
　　怎么在网页中嵌入百度地图
　　1、定位中心点，就是你想要作为中心的位置。点击切换城市，输入就行
　　2、再选具体位置
　　3、设置地图宽高等参数
　　4、添加标记等
　　5、获取代码
　　6、复制代码
　　7、粘贴到html文件中即可，然后只需要你进行页面布局修饰了
[怎么在网页中嵌入百度地图]相关的文章
如何清理IE缓存
电脑怎样设置开机密码_电脑没有声音怎么办
【电脑技巧】图文推荐最近做android百度地图,但是使用baidumapapi_v2_3_1.jar和libBaiduMapSDK_v2_3_1.so显示百度地图时总是遇到问题——只显示网格而没有显示地图,网络连接和APIKey申请都是正确的,就是不知道为什么不能显示,网上也有很多人遇到这个问题,有的是SDK更新不兼容.
最近做android百度地图,但是使用baidumapapi_v2_3_1.jar和libBaiduMapSDK_v2_3_1.so显示百度地图时总是遇到问题——只显示网格而没有显示地图,网络连接和APIKey申请都是正确的,就是不知道为什么不能显示,网上也有很多人遇到这个问题,有的是SDK更新不兼容.而且网上很多百度地图都是使用V2.3.1版本,后来没有办法只有通过baidumapapi_v2_4_1.jar完成显示地图.
其中需要注意的是使用2.3.1时调用manager.init("APIKey",null)初始化地图,而2.4.1版本是通过在AndroidManifest.xml的meta-data中输入AK.
PS:这仅仅是一篇Android开发百度地图的基础文章,网上资料也很多,但该方法可行.参考郭神《Android第一行代码》中方法也是v2.3.1只能显示网格而没有地图.
一.开发前申请APIKey
参考资料：
官方开发SDK指南
百度地图申请密钥
首先,注册成为一名百度开发者.
提交注册成功后如下图所示.
点击"去创建应用&&",如下图所示,这里显示你的应用列表.
此时点击“创建应用”即可申请APIKey,选择类型以前我们见过的博客书籍通常是选择"for mobile"应用类型,这里已经没有该选项了,故我选择"for Android",同时输入安全码!
这里你可能疑惑"安全码"是什么?它是由"数字签名;包名"组成,其中数字签名是我们打包程序时keystore的SHA1指纹,通过点击Eclipse的"窗体(Window)-&首选项(Preferences)-&Android-&Build"查看,同时也可参照上面官方文档链接通过cmd获取.而包名就是应用程序对应的包名.如下:
E5:BA:71:31:9D:A3:BF:92:8D:2E:8F:3A:6D:0A:93:5B:3D:36:59:08;com.example.baidumapshow
点击"提交"后即可获取的AK：QwaNhFQ0ty2QmdYh3Nrr0gQx
二.配置项目调用SDK
下载Android SDK地址：
在创建好的应用程序BaiduMapShow项目中libs目录下复制baidumapapi_v2_4_1.jar文件,同时libs目录下新建armeabi目录,并拷贝libBaiduMapSDK_v2_4_1.so文件.如下图所示:
其中该工程包名为com.eample.baidumapshow,libs目录用于存放第三方Jar包,armeabi目录存放NDK生成so文件调用其C/C++函数库.同时需要导入jar包,右键工程-&"Properties(属性)"-&"Java构建路径",如下图所示添加JAR.
三.源代码显示百度地图
1.activity_main.xml布局文件
布局文件中通过加载百度地图控件MapView,它是由百度提供的自定义控件故需要加上完整包名,同时该控件需要接受点击事件clickable设置为true.
&FrameLayout xmlns:android="/apk/res/android"
xmlns:tools="/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.baidumapshow.MainActivity"
tools:ignore="MergeRootFrame" &
&com.baidu.mapapi.map.MapView
android:id="@+id/map_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true" /&
&/FrameLayout&
2.MainActivity.java文件public class MainActivity extends Activity {
//BMapManager 对象管理地图、定位、搜索功能
private BMapManager mBMapM
//MapView 地图主控件
private MapView mapView =
//MapController 完成地图控制
private MapController mMapController =
//MKMapViewListener 用于处理地图事件回调
MKMapViewListener mMapListener =
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
* 创建对象BMapManager并初始化操作
* V2.3.1中init(APIKey,null) V2.4.1在AndroidManifest中赋值AK
* 注意 初始化操作在setContentView()前
mBMapManager = new BMapManager(getApplication());
mBMapManager.init(null);
setContentView(R.layout.activity_main);
mapView = (MapView) findViewById(R.id.map_view);
//获取地图控制器 取得MapController实例
mMapController = mapView.getController();
//设置地图是否响应点击事件
mMapController.enableClick(true);
//设置地图缩放级别 3-19级别 级别越高 信息越详细
mMapController.setZoom(16);
//显示内置缩放控件
mapView.setBuiltInZoomControls(true);
* 获取学校经纬度 设置地图中心点
GeoPoint point = new GeoPoint((int)(39.96703 * 1E6), (int)(116.323772 * 1E6));
mMapController.setCenter(point);
mapView.regMapViewListener(mBMapManager, new MKMapViewListener() {
* 地图移动完成时会回调此接口方法
public void onMapMoveFinish() {
Toast.makeText(MainActivity.this, "地图移动", Toast.LENGTH_SHORT).show();
* 地图加载完毕回调此接口方法
public void onMapLoadFinish() {
Toast.makeText(MainActivity.this, "地图载入", Toast.LENGTH_SHORT).show();
地图完成带动画的操作（如: animationTo()）后，此回调被触发
public void onMapAnimationFinish() {
当调用过 mMapView.getCurrentMap()后，此回调会被触发
可在此保存截图至存储设备
public void onGetCurrentMap(Bitmap arg0) {
* 点击地图上被标记的点回调此方法
public void onClickMapPoi(MapPoi arg0) {
if (arg0 != null){
Toast.makeText(MainActivity.this, arg0.strText, Toast.LENGTH_SHORT).show();
protected void onResume() {
mapView.onResume();
if (mBMapManager != null) {
mBMapManager.start();
super.onResume();
protected void onDestroy() {
mapView.destroy();
if (mBMapManager != null) {
mBMapManager.destroy();
mBMapManager =
super.onDestroy();
protected void onPause() {
mapView.onPause();
if (mBMapManager != null) {
mBMapManager.stop();
super.onPause();
3.AndroidManifest.xml中申明权限和APIKey
其中最重要的是添加APIKey,方法mBMapManager.init(null)调用.
&meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value="QwaNhFQ0ty2QmdYh3Nrr0gQx"&
&/meta-data& &?xml version="1.0" encoding="utf-8"?&
&manifest xmlns:android="/apk/res/android"
package="com.example.baidumapshow"
android:versionCode="1"
android:versionName="1.0" &
android:minSdkVersion="19"
android:targetSdkVersion="19" /&
&!-- 获取网络状态
&uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /&
&!-- 访问网络 --&
&uses-permission android:name="android.permission.INTERNET" /&
&!-- 获取WiFi状态 --&
&uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /&
&uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /&
&!-- 允许程序写入外部存储,如SD卡上写文件 --&
&uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /&
&uses-permission android:name="android.permission.WRITE_SETTINGS" /&
&!-- 读取电话状态 --&
&uses-permission android:name="android.permission.READ_PHONE_STATE" /&
&uses-permission android:name="android.permission.CALL_PHONE" /&
&!-- 获取精确位置 GPS芯片接收卫星的定位信息,定位精度达10米以内 --&
&uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /&
&!-- 通过WiFi或移动基站的方式获取用户错略的经纬度信息 --&
&uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /&
&!-- 获取模拟定位信息 --&
&uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" /&
&uses-permission android:name="android.permission.ACCESS_GPS" /&
&application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" &
&meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value="QwaNhFQ0ty2QmdYh3Nrr0gQx"&
&/meta-data&
android:name="com.example.baidumapshow.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&
&/manifest&
4.运行效果如下图所示
最后希望文章对大家有所帮助,这是我帮同学做百度地图简单研究的一篇基础性文章,其中后面准备讲讲百度地图POI兴趣搜索和添加标注等功能吧!对于前面的问题我也不知道为什么总是显示网格而没有地图,但是通过V2_4_1能显示地图.
我猜测其原因是以前申请的APIKey调用方法可以实现显示地图,但是由于百度新更新的SDK方法不兼容,现在申请的APIKey需要使用新的方法,故上面的才能显示,个人意见,不知道是否正确啊!
(By:Eastmount
夜2点 )参考资料:
1.郭霖大神《Android第一行代码》第11章基于百度地图的开发
2.xiaanming大神文章
3.百度官方文档和文库
用云栖社区APP，舒服~
【云栖快讯】首届阿里巴巴中间件技术峰会，揭秘阿里10年分布式技术沉淀！阿里高可用体系核心缔造者、全链路压测创始人，DRDS与TDDL负责人等大咖出场，干货分享，不可错过！&&
阿里云移动APP解决方案，助力开发者轻松应对移动app中随时可能出现的用户数量的爆发式增长、复杂的移动安全挑战等...
凝聚阿里巴巴多年来在无线业务安全防御的成功经验和技术成果，并面向开发者和企业提供安全扫描、应用加固、安全组件、数...
深度挖掘企业与企业、企业与人物的关系，通过多位交叉分析及智能算法，构建基于企业全息画像和企业关系网络的风险洞察、...
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
2017杭州云栖大会火热抢票
Loading...为何我将地图代码上传到网站之后只显示一个空白框呢？_百度地图api吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：5,671贴子：
为何我将地图代码上传到网站之后只显示一个空白框呢？收藏
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&&html xmlns=""&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" /&&meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" /&&title&百度地图API自定义地图&/title&&!--引用百度地图API--&&style type="text/css"&
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14font-weight:overflow:padding-right:13white-space:nowrap}
.iw_poi_content {font:12px arial,sans-overflow:padding-top:4white-space:-moz-pre-word-wrap:break-word}&/style&&script type="text/javascript" src=""&&/script&&/head& &body&
&!--百度地图容器--&
&div style="width:500height:400border:#ccc solid 1" id="dituContent"&&/div&&/body&&script type="text/javascript"&
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(113..909916);//定义一个中心点坐标
map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map =//将map变量存储在全局
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(ctrl_nav);
//向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); map.addControl(ctrl_ove);
//向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); map.addControl(ctrl_sca);
//标注点数组
var markerArr = [{title:"河南正大中科机械设备有限公司",content:"我公司的详细地址",point:"113..910086",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
你弄清楚了没
同样情况，请高手现身
我的是浏览器兼容性的问题，火狐浏览器打不开，我换成ie浏览器后就可以了
登录百度帐号推荐应用你正在使用的浏览器版本过低，将不能正常浏览和使用知乎。