网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

时间：2021-07-08 02:09:58

在网页中插入百度地图

如果想在自己的网页上面加入百度地图的话，可以用百度地图的api.具体使用方法如下：

第一步：进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/，搜索出自己要展示的位置，如下图所示。

网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

第二步：设置地图，大家可以对网站显示地图的宽高进行设置，其余选项不动。

第三步：添加标注。点击第一个图标后，在右侧找到自己的位置，单击鼠标左键可定位。标记图标处可更换图标形状，名称和备注填入位置相关信息。

第四步：获取代码。将代码贴到你的网页里就OK了。代码如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">

<head>

<meta http-equiv="Content-Type" content="text/html; 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:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}

.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}

</style>

<script type="text/javascript" src="<a href="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script">http://api.map.baidu.com/api?key=&v=1.1&services=true"></script</a>>

</head></p>< p><body>

<!--百度地图容器-->

<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

</body>

<script type="text/javascript">

//创建和初始化地图函数：

function initMap(){

createMap();//创建地图

setMapEvent();//设置地图事件

addMapControl();//向地图添加控件

}

//创建地图函数：

function createMap(){

var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图

var point = new BMap.Point(113.116257,27.822879);//定义一个中心点坐标

map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中

window.map = 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);

}

initMap();//创建和初始化地图

</script>

</html>
来源：http://www.jb51.net/web/162032.html

网页嵌入百度地图和使用百度地图api自定义地图的详细步骤的更多相关文章

  1. 百度地图API自定义地图

    http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...

  2. 如何在网中使用百度地图API自定义个性化地图

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. HTM L百度地图API 自定义工具地图实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 地图开发笔记（一）：百度地图介绍、使用和Qt内嵌地图Demo

    前言   Qt在地图方面的研发.   百度地图 介绍   百度的地图分为多个开发,都是在线的(离线的需要自己提取,本篇解说在线地图).  百度地图JavaScript API支持HTTP和HTTPS, ...

  5. iOS百度地图SDK集成详细步骤

    1.iOS百度地图下载地址 http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download 根据需要选择不同的版本  ...

  6. 如何获取google地图、baidu百度地图的坐标

    google:打开google地图-->查找目的地-->右键:此位置居中-->地址栏键入javascript:void(prompt('',gApplication.getMap() ...

  7. 关于百度地图API的地图坐标转换问题

    原文:关于百度地图API的地图坐标转换问题 我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准 ...

  8. 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层&plus;热区）

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  9. 基于MySQL &plus; Node&period;js &plus; Leaflet的离线地图展示，支持百度、谷歌、高德、腾讯地图

    1. 基本说明 本项目实现了离线展示百度.谷歌.高德.腾讯地图.主要功能如下: 实现了地图瓦片图下载.存储.目前支持存储至MySQL Node.js服务调用MySQL中的瓦片图 Leaflet展示地图 ...

随机推荐

  1. tableView简单的动画效果

    tableView 中一些动画效果通常都是实现willDisplayCell的方法来展示出一些动画的效果 (1).带有3D效果的小型动态展示 -(void)tableView:(UITableView ...

  2. hdu 4696 Answers

    思路:由于c[i]要么是1,要么是2.所以当c[i]中没有1的时候就不可能得到奇数: 再就是如果m<=0,也不可能得到. 代码如下: #include<cstdio> #includ ...

  3. MQ 2035&lpar;MQRC&lowbar;NOT&lowbar;AUTHORIZED&rpar;

    当使用MQ7.1或7.5时,如果使用MQ管理员账号去连接MQ服务器,可能会报以下的错误,提示你权限不足. 2035 MQRC_NOT_AUTHORIZED 在之前的版本中是没有这个问题的. 原因是在7 ...

  4. centos安装wget 及配置（转）

    yum -y install wget #yum install perl Searching for GCC... The path "" is not valid path t ...

  5. Installing IIS 8&period;5 on Windows Server 2012 R2

    原文 Installing IIS 8.5 on Windows Server 2012 R2 Introduction This document describes how to install ...

  6. Symbolic link and hard link的区别（linux）

    --Symbolic link and hard link的区别(linux) --------------------------------------------------2014/06/10 ...

  7. 使用 Bundle 在 Activity 之间交换数据

    [toc] 使用 Bundle 在 Activity 之间交换数据 场景 当一个 Activity 启动另一个 Activity 时,常常会有一些数据需要传过去.因为两个 Activity 之间本来就 ...

  8. 转发：C&num;操作SQL Server数据库

    转发自:http://www.cnblogs.com/rainman/archive/2012/03/13/2393975.html 1.概述 2.连接字符串的写法 3.SqlConnection对象 ...

  9. Oracle测试环境参数调整&period;

    测试环境上面Oracle数据库性能参数设置 1. 关闭回收站 alter system set recyclebin=off 2. 修改redo日志的大小 11g的默认大小是50m 如果redo fi ...

  10. 二、主流区块链技术特点及Hyperledger Fabric V0&period;6版本特点

    一.主流区块链技术特点 二.HyperLedger子项目 三.Hyperledger fabric架构 V0.6逻辑架构: V0.6区块链网络 对应的0.6版本的运行时架构: 0.6版本的架构特点是: ...

相关文章