简单使用百度API生成地图步骤
- 格式：doc
- 大小：453.50 KB
- 文档页数：9
下载文档原格式
合集下载
web端百度地图API实现实时轨迹动态展现
web端百度地图API实现实时轨迹动态展现最近在⼯作中遇到了⼀个百度地图api中的难题，恐怕有的程序员可能也遇到过。
就是实时定位并显⽰轨迹，⽹上⼤部分都是通过创建polyline对象贴到地图上。
当然，百度地图的画线就是这样实现的，但是好多⼈会发现，如果数据量超过四五千的话，浏览器可能就要卡了，后⾯可能就直接因为浏览器内存不⾜直接崩溃。
按理讲⾯对这么少的数据，百度地图肯定会考虑到这⼀点，所以肯定有解决的⽅法。
下⾯将介绍本⼈的⽅法供⼤家参考：1、数据准备这⽅便的数据我是ajax请求从后台获取的就不说了。
画线的话我们就得⽤到百度地图api中的polyline类了，因为我们是实时定位，以前的历史路径是存在，但是我们不能每次都要new⼀个polyline对象贴到地图上，所以就需要⽤到polyline的setPath(path: Array<>)，我们把整条路径的数据全部塞进去就可以了。
这⾥我⽤⼀个json格式的数组保存每个历史路径的所有路径数据，后⾯就是来数据更新数组再找到地图上相应的polyline对象塞进去就可以了。
var polylineArray = [];//此数组专门存储历史路径var PolylineJson = {};PolylineJson["Id"] = Id;//存储相应的polyline对象PolylineJson ["PathArray"] = polylineArray ;polylineArray.push(PolylineJson);备注：Polyline是个覆盖物对象，可以和其他对象⼀样⾃定义属性的，⽐如在声明以后设置polyline的id属性直接⽤polyline.id=content就可以了。
再例如： 或 polyline.length等。
覆盖物对象可以根据⾃⼰的需求⾃定义任何属性，取值的时候只需按这个字段取就可以了。
百度地图API的使用方法
百度地图API的使用方法开始学习百度地图API最简单的方式是看一个简单的示例。
以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心:1.<html>2.<head>3.<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>4.<title>Hello,World</title>5.<script type="text/javascript"src="/api?key=46ce9d0614bf7aefe0ba562f8cf 87194&v=1.0&services=false"></script>6.</head>7.<body>8.<div style="width:520px;height:340px;border:1px solid gray"id="container"></div>9.</body>10.</html>11.12.<html><head><meta http-equiv="Content-Type"content="text/html;charset=utf-8"/><title>Hello,World</title><script type="text/javascript"src="/api?key=46ce9d0614bf7aefe0ba562f8cf87 194&v=1.0&services=false"></script></head><body><div style="width:520px;height:340px;border:1px solid gray"id="container"></div></body></html>1.<script type="text/javascript">2.var map=new BMap.Map("container");//创建地图实例3.var point=new BMap.Point(116.404,39.915);//创建点坐标4.map.centerAndZoom(point,15);//初始化地图，设置中心点坐标和地图级别5.</script>6.<script type="text/javascript">var map=new BMap.Map("container");//创建地图实例var point=new BMap.Point(116.404,39.915);//创建点坐标map.centerAndZoom(point,15);//初始化地图，设置中心点坐标和地图级别</script>引用百度地图API文件当您引用地图API文件时，需要使用自己申请的API密钥。
百度地图api使用文档marker标注label使用
引入百度api<script type="text/javascript" src=".com/api?v=1.4"></script> 1.4api版本<script type="text/javascript" src=".com/library/MapWrapper/1.2/src/"></script> 转化gps坐标google坐标用初始化地图var myMap = new BMap.Map("divMap"); //divMap为要在id为divMap的div中myMap.centerAndZoom(new BMap.Point(116.404, 39.915), 12);//地图显示中心坐标为116.404,39.915，放大级别为12myMap.enableScrollWheelZoom(); //允许鼠标滚轮滑动放大缩小地图label添加var point=new BMap.Point(116.404, 39.915);//label显示的位置var myLabel = new bel("海辉房产21000元", //为lable填写内容{offset:new BMap.Size(-60,-60), //label的偏移量，为了让label的中心显示在点上position:point}); //label的位置myLabel.setTitle("我是文本标注label");myLabel.setTitle("我是文本标注label");//为label添加鼠标提示myLabel.setStyle({ //给label设置样式，任意的CSS都是可以的"color":"red", //颜色"fontSize":"14px", //字号"border":"0", //边"height":"120px", //高度" width":"125px", //宽"textAlign":"center", //文字水平居中显示1"lineHeight":"120px", //行高，文字垂直居中显示"background":"url(/icons/CrystalClear/128x128/actions/gohome.png)", //背景图片，这是房产标注的关键！"cursor":"pointer"});myMap.addOverlay(myLabel); //把label添加到地图上以上设置效果如图1添加自定义marker自定义marker图标样式默认为红色水滴形式下面代码为更改图标样式var iconSelf = new BMap.Icon('self.png', new BMap.Size(20, 32), { //设置图标显示图片anchor: new BMap.Size(10, 30)var mkrSelf = new BMap.Marker(new BMap.Point(116.250 + i * 0.01, 39.910), { //设置位置icon: iconSelf});myMap.addOverlay(mkrSelf); //添加到地图中设置效果如下默认图标如下添加maker监听鼠标放上事件及显示信息mkrSelf .addEventListener("mouseover", function(){var infoWin = new Window("Person" + i);//定义显示信息this.openInfoWindow(infoWin);});效果如下3。
React中使用百度地图API
React中使⽤百度地图API今天我们来搞⼀搞如何在React中使⽤百度地图API好吧，最近忙的头⽪发⿇，感觉⾝体被掏空，所以很久都没来写博客了，但今天我⼀定要来⼀篇好吧话不多说，我们直接开始好吧特别注意：该React项⽬是⽤create react app 创建的（以下所有操作都在该基础上进⾏）1.去百度地图登录/2.获取密钥 登录后在右上⾓的控制台⾥⾯申请（由于这个我早已申请过了，就不给⼤家演⽰了，⼤家照着它的提⽰⾛就可以了）3.拿到密钥后，将百度API的script引⼊到public下的index.html⽂件<script type="text/javascript" src="/api?v=2.0&ak=你的密钥"></script>4.去node_modules⽂件夹下找react-script>config>webpack.config.dev.js然后我们打开该⽂件添加⼀句话externals:{'BMap':'BMap',}5.到此我们已经可以在组件中愉快的使⽤百度地图API了，下⾯给个组件使⽤的实例import React,{Component} from 'react';import BMap from 'BMap';class AddressUi extends Component{render() {return(<div className="address" id="address"></div>)}componentDidMount(){var map = new BMap.Map("address"); // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中⼼点坐标和地图级别map.addControl(new BMap.MapTypeControl()); //添加地图类型控件map.setCurrentCity("北京"); // 设置地图显⽰的城市此项是必须设置的map.enableScrollWheelZoom();}}export default AddressUi对百度地图API的具体操作可参照官⽹/jsdemo.htm#i8_1特别注意：注意在react中使⽤百度地图的API时会传⼊⼤写的变量名，这时要使⽤window.变量名，来表明它是全局变量，不然会报错。
百度地图API应用实例说明文档
百度地图API百度地图API应用实例Michael Tian目录百度地图API (3)1基础知识 (3)1.1 百度地图 API 概念 (3)1.2 百度地图的“Hello, World” (3)1.2.1 引用百度地图API文件 (5)1.2.2创建地图容器元素 (5)1.2.3命名空间 (5)1.2.4创建地图实例 (5)1.2.5创建点坐标 (6)1.2.6 初始化地图 (6)1.2.7地图操作 (6)2应用示例 (6)2.1 Map类 (7)2.2 ExtJs (7)2.2.1 将百度地图嵌入到Ext中 (8)2.2.2 在Ext中显示百度地图 (10)2.3 向地图添加标注 (10)2.4 为标注添加信息窗口 (11)2.5 标注与数据列表的联动 (12)2.6 数据列表与标注的联动 (12)2.7 创建可拖拽的标注 (14)3折线 (14)3.1添加多边形 (14)3.2样式设置 (16)4自定义标注 (16)5 文本标注 (17)5.1 添加一个文本标注 (17)5.2 文本位置偏移值 (18)5.3 自定义Label (19)5.4 添加滑动门效果 (20)6参考资料 (21)百度地图API1基础知识1.1 百度地图 API 概念百度地图API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。
百度地图API不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。
1.2 百度地图的“Hello, World”开始学习百度地图API最简单的方式是看一个简单的示例。
以下代码创建了一个520x340<meta http-equiv="Content-Type"content="text/html; charset=gbk"/> <title>Hello, World</title><scriptsrc=/api?key=46ce9d0614bf7aefe0ba562f8cf87194 &v=1.0&services=false type="text/javascript"></script></head><body><div style="width: 520px; height: 340px; border: 1px solid gray"id="container"></div></body></html><script type="text/javascript">var map = new BMap.Map("container"); // 创建Map实例var point = new BMap.Point(116.404, 39.915); // 创建点坐标map.centerAndZoom(point,15); // 初始化地图，设置中心点坐标和地图级别。
百度lbs教程
百度lbs教程百度LBS（百度地图开放平台）是一个地理位置服务平台，提供了多种地图及地理位置相关的功能和服务，是开发者在自己的应用中集成地理位置信息的首选平台。
本文将为您详细介绍百度LBS的使用方法和相关教程。
百度LBS提供了多个API接口，包括地理编码、逆地理编码、路线规划、距离计算、地点检索等。
这些接口可以帮助开发者实现各种功能，比如地图显示、位置搜索、路径规划等。
在使用这些接口之前，需要开发者先申请百度LBS开发者密钥，并在应用中进行设置。
首先，我们来介绍一下地理编码和逆地理编码这两个API接口。
地理编码可以将地址转换为经纬度坐标，而逆地理编码则可以将经纬度坐标转换为地址。
开发者可以通过地理编码将用户输入的地址转换为具体的坐标，在地图上进行显示；而通过逆地理编码，可以将用户点击地图上的某一点的坐标转换为具体的地址信息。
接下来是路线规划和距离计算这两个API接口。
路线规划可以根据用户设定的起点和终点，计算出一条最佳路径，并显示在地图上。
开发者可以通过路线规划来为用户提供导航功能。
而距离计算则可以根据用户设定的起点和终点，计算出两点之间的距离，帮助用户了解两地之间的距离情况。
最后是地点检索这个API接口。
地点检索可以帮助用户在地图上搜索特定的地点信息。
用户可以通过关键字搜索、按照分类选择等方式来获取所需的地点数据。
开发者可以将地点检索功能集成到自己的应用中，提供给用户更便捷的地点搜索体验。
百度LBS提供了完善的开发文档和示例代码，开发者可以根据自己的需求进行开发。
在使用百度LBS之前，开发者需要先了解基本的HTML、JavaScript等web开发知识，并熟悉百度LBS相关的API接口和参数。
百度LBS还提供了多个SDK 供不同平台的开发者使用，包括Android、iOS、Web等，开发者可以根据自己的开发环境选择合适的SDK进行开发。
在实际开发过程中，开发者可以根据自己的需求进行代码的编写和调试。
JS使用百度地图API自动获取地址和经纬度操作示例
JS使⽤百度地图API⾃动获取地址和经纬度操作⽰例本⽂实例讲述了JS使⽤百度地图API⾃动获取地址和经纬度操作。
分享给⼤家供⼤家参考，具体如下：在实际⼯作中我们经常会遇到这样的问题，但是当我们去看百度API的时候往往⼜达不到我们的要求。
故此，本篇博⽂讲述如何使⽤百度地图API⾃动获取地址和经纬度：1、HTML代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>点击地图获取地址和经纬度map，address，lng，lat</title><meta name="robots" content="noindex, nofollow"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!-- 将百度地图API引⼊，设置好⾃⼰的key --><script type="text/javascript" src="/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script></head><body><div class="main-div"><form method="post" action="" name="theForm" enctype="multipart/form-data" onsubmit="return validate()"><table cellspacing="1" cellpadding="3" width="100%"><tr><td class="label">经度</td><td><input type="text" name="lng" id="lng" value=""/></td></tr><tr><td class="label">纬度</td><td><input type="text" name="lat" id="lat" value=""/></td></tr><tr><td class="label">地址</td><td><input type='text' value='' name='sever_add' id='sever_add' readonly><input type='button' value='点击显⽰地图获取地址经纬度' id='open'></td></tr></table></form><div id='allmap' style='width: 50%; height: 50%; position: absolute; display: none'></div></div></body></html>2、JS代码如下<script type="text/javascript">function validate() {var sever_add = document.getElementsByName('sever_add')[0].value;if (isNull(sever_add)) {alert('请选择地址');return false;}return true;}//判断是否是空function isNull(a) {return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false;}document.getElementById('open').onclick = function () {if (document.getElementById('allmap').style.display == 'none') {document.getElementById('allmap').style.display = 'block';} else {document.getElementById('allmap').style.display = 'none';}}var map = new BMap.Map("allmap");var geoc = new BMap.Geocoder(); //地址解析对象var markersArray = [];var geolocation = new BMap.Geolocation();var point = new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 12); // 中⼼点geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);map.enableScrollWheelZoom(true);}else {alert('failed' + this.getStatus());}}, {enableHighAccuracy: true})map.addEventListener("click", showInfo);//清除标识function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注function addMarker(point) {var marker = new BMap.Marker(point);markersArray.push(marker);clearOverlays();map.addOverlay(marker);}//点击地图时间处理function showInfo(e) {document.getElementById('lng').value = e.point.lng;document.getElementById('lat').value = t;geoc.getLocation(e.point, function (rs) {var addComp = rs.addressComponents;var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; if (confirm("确定要地址是" + address + "?")) {document.getElementById('allmap').style.display = 'none';document.getElementById('sever_add').value = address;}});addMarker(e.point);}</script>将js代码放⼊到html中，我们可以得到效果图如下：更多关于JavaScript相关内容还可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。
百度地图API基本使用（二）
百度地图API基本使⽤（⼆）本⽂系作者原创，转载请私信并在⽂章开头附带作者和原⽂地址链接。
违者，作者保留追究权利。
前⾔PS：我所使⽤的的是百度地图Javascript API 3.0本⽂是对之前使⽤的延续，继续对百度地图API的⼀些使⽤去做归纳和总结，本次主要是对地图上的覆盖物这块做介绍，如果有⼩伙伴没有看过之前的，可以先去观看⼀下，前期所需要的⼀些准备，以及⼀些基本的⽤法。
感兴趣的⼩伙伴可以⾃⾏查看百度地图官⽅提供的⽂档开发⽂档中的JavaScript API也可以通过下⽅⽰例中⼼更直观的看到百度地图API的⼀些使⽤，以及它的⼀些特性不过要注意：实例中⼼使⽤的是BMapGL去创建容器的，最新版GL地图命名空间为BMapGL, 可按住⿏标右键控制地图旋转、修改倾斜⾓度。
由于本次使⽤的是BMapGL所以在引⼊API的时候也不太⼀样引⼊⽅式如下：<script type="text/javascript" src="///api?type=webgl&v=1.0&ak=您的密钥"></script>好的，废话不多说，开整百度地图API-覆盖物在讲覆盖物之前，先给⼤家讲⼀下覆盖物的添加和删除的⽅法，这个是通⽤的，下⾯各种类型的覆盖的添加和删除的使⽤是⼀样的。
在我们获取到容器之后，根据⾃⼰的需求创建好⾃⼰的覆盖物对象之后，如果我们需要添加覆盖物的话，就可以使⽤容器对象.addOverlay(覆盖物对象);如果我们需要清除覆盖物的话，只需要使⽤容器对象.clearOverlays();就可以清除所有，但是如果只是想清除某⼀个覆盖物的话，我们需要使⽤容器对象.removeOverlays(覆盖物对象);代码⽰例如下://创建容器var map = new BMapGL.Map('allmap');var point = new BMapGL.Point(116.404, 39.915);map.centerAndZoom(point, 15);// 创建点覆盖物var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));//添加覆盖物map.addOverlay(marker);//删除具体覆盖物map.removeOverlays(marker);//删除所有覆盖物map.clearOverlays();1. 点覆盖物点覆盖物主要使⽤的是Marker这个⽅法，例如：var marker1 = new BMapGL.Marker(new BMapGL.Point(经度, 纬度));这样就创建好了⼀个点覆盖物对象，我们需要使⽤上⾯介绍的添加覆盖物的⽅法，将覆盖物添加到容器中，即容器对象.addOverlay(marker1)这样就实现了简单的点覆盖物，不过有的时候需要我们的覆盖物能够拖动，所以这个时候就要⽤到⼀个属性enableDragging，默认情况下是false,也就是说在上⾯的那些默认创建的⽅式这个属性都是false,这是属性字⾯意思也很好理解⽀持拖拽，所以如果有需要拖拽的需求，我们只需要将整个属性设置为true。
在前端项目中的百度地图API的使用教程
文汇建站： 在前端项目中的百度地图API的使用教程前端项目中经常会有地图模块类的效果，那么作为前端应该如何进行地图类模块呢，下面小编结合自己的使用经历与百度地图api开发文档所写的百度地图api使用教程。
第一步申请百度账号和AK进入百度地图开放平台-控制台-创建应用应用名称可以随便取一个，只要符合命名规范进行应用类型根据自己的项目类型进行选择白名单由于是自己本地测试，所以只填*就可以应用内容填写好后进行提交文汇建站：第二步获得创建项目的AK第三步将JavaScript文件引用到自己的项目中<script type="text/javascript"src="/api?v=3.0&a k=您的密钥"></script>这里的密钥是第二步的Ak第四步创建地图容器<div id="container"></div>设置地图容器的宽度与高度，否则看不见地图哦第五步设置地图中心点以及控件<script type="text/javascript">//百度地图API功能var map=new BMap.Map("container");//获得地图容器var point=new BMap.Point(116.328854,39.959881);//设置地图中心点的经纬坐标map.centerAndZoom(point,18);//设置地图的缩放比例//创建标记点var marker=new BMap.Marker(point);map.addOverlay(marker);//将标注添加到地图中文汇建站： </script>详细地图控件见百度地图开发平台开发文档这样一个地图模块就可以在自己的项目中呈现了。
网页嵌入百度地图和使用百度地图api自定义地图的详细步骤
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话，可以用百度地图的api.具体使用方法如下：第一步：进入百度创建地图的网站/lbsapi/creatmap/，搜索出自己要展示的位置，如下图所第二步：设置地图，大家可以对网站显示地图的宽高进行设置，其余选项不动。
第三步：添加标注。
点击第一个图标后，在右侧找到自己的位置，单击鼠标左键可定位。
标记图标处可更换图标形状第四步：获取代码。
将代码贴到你的网页里就OK了。
另附上谷歌地图的使用方式要在自己的网页中嵌入地图，常用的方法可以归纳为以下几种：1、最简单的方法 ——使用谷歌地图主页的"链接"如果你只需要在自己的页面上显示某个特定范围的地图，比如你的公司所在地，但是不需要在地图上添加任何额外登录谷歌地图主页，定位你需要显示的范围后，点击地图左上角的“链接”，会出现一个信息框，给出两个输入框，其实，这段嵌入代码就是一个iframe的声明，所以，虽然地图主页提供一个自定义地图并预览的功能，但是只能自2、最精简的方法 ——使用谷歌静态地图如果你需要显示某个特定范围的地图，而且需要在地图上加上一些标记、折线。
但是，你并不在乎你网页上的地图所谓静态地图，意思就是你在页面上嵌入的其实只是一个GIF图片，这个GIF图片是你通过URL从谷歌动态获取的，要在你的页面上使用这样的静态地图，只需要使用一个img标签，把这个标签的src属性指定为谷歌静态地图的url就看一个简单的静态地图URL：/staticmap?center=39.915175,116.389332&zoom=14&size=500在这个URL中，你可以编辑center、zoom、size这些参数来指定地图的中心点、缩放级别、地图大小等等，当然，严格来说，谷歌静态地图也是谷歌地图API的一种，所以，使用静态地图是需要你的谷歌地图API密钥的，如果你之3、最自由的方法 --使用谷歌地图API如果上面两种方式都不能满足你的需求，那么，就来试试谷歌地图API吧。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
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_PAN});
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("doint = new BMap.Point(120.365872,31.545238);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
var label = new bel(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
function createInfoWindow(i){
var json = markerArr[i];
var iw = new Window("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
</style>
<script type="text/javascript" src="/api?key=&v=1.1&services=true"></script>
</head>
<v style="width:500px;height:400px;border:#ccc solid 1px;" id="dituContent"></div>
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap(){
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
<meta name="descriptiotyle type="text/css">
html,body{margin:0;padding:0;}
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();ml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keyword
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
return icon;
}
initMap();//创建和初始化地图
</script>
</html>
2.3
只需要一个div,一个javascript引用和一个javascript块，如下
//div块
<div style="width:500px;height:400px;border:#ccc solid 1px;" id="dituContent"></div>
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_PAN});
var map = new BMap.Map("doint = new BMap.Point(120.365872,31.545238);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
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_PAN});
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("doint = new BMap.Point(120.365872,31.545238);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
var label = new bel(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
function createInfoWindow(i){
var json = markerArr[i];
var iw = new Window("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
</style>
<script type="text/javascript" src="/api?key=&v=1.1&services=true"></script>
</head>
<v style="width:500px;height:400px;border:#ccc solid 1px;" id="dituContent"></div>
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap(){
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
<meta name="descriptiotyle type="text/css">
html,body{margin:0;padding:0;}
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();ml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keyword
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
return icon;
}
initMap();//创建和初始化地图
</script>
</html>
2.3
只需要一个div,一个javascript引用和一个javascript块，如下
//div块
<div style="width:500px;height:400px;border:#ccc solid 1px;" id="dituContent"></div>
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_PAN});
var map = new BMap.Map("doint = new BMap.Point(120.365872,31.545238);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow