百度地图API-javascript-web地图的应用
html部分的代码
<div class="maxwidth"> <div class="address clearfix"> <div class="map-box fl"> <div id="allmap"></div> </div> <div class="maptitle fr"> <span>建和塑胶材料有限公司</span> <p>联系人:胡先生</p> <p>电子邮箱:hudb@pvc123.com</p> <p>联系地址:东莞市南城区高盛科技大厦5楼</p> <div class="qqinline"> <a href="#">QQ在线咨询</a> </div> </div> <div class="mapimg fr"> <img src="../static/conaaa.png" /> </div> </div> <div class="hot"> <img src="../static/hot.jpg" /> </div> </div>
css部分代码
.maxwidth{width:1200px;margin:0px auto;} /*map*/ .map-box{background-color:#fff;width:750px;height:538px;border:1px solid #eee;} #allmap{width:730px;height:518px;margin:10px;} span.BMap_Marker label.BMapLabel{border:1px solid #000;border-radius: 3px;} /*map end*/
js部分代码
<script src="../js/jquery.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?ak=nbAwc69Hb3sgKdGHko1HWhSP&v=2.0"></script> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(113.732756,22.992607); map.centerAndZoom(point, 19); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var label = new BMap.Label("建和塑胶材料有限公司",{offset:new BMap.Size(20,-10)}); label.setStyle({ borderColor : "black" }); //marker.addEventListener("click", function(){ //点击弹出可去掉注释 marker.setLabel(label); //开启信息窗口 //}); //点击弹出可去掉注释 </script>
效果图如下:
写地图巨有用的地址mark:
百度地图生成器
http://api.map.baidu.com/lbsapi/creatmap/index.html
百度地图拾取坐标系统
http://api.map.baidu.com/lbsapi/getpoint/index.html
百度地图JavaScript API
http://lbsyun.baidu.com/index.php?title=jspopular
百度地图API-javascript-web地图的应用的更多相关文章
- PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例
原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程序--> <!DOCTYPE html> <html&g ...
- 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...
- 高德地图 API JavaScript API
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx ...
- 如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 百度地图API,展示地图和添加控件
1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...
- HTM L百度地图API 自定义工具地图实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
- 使用百度地图API进行Android地图应用开发(Eclipse)
随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. ...
- 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图API开发----手机地图做导航功能
第一种方式:手机网页点击打开直接进百度地图APP <a href="baidumap://map/direction?mode=[transit:公交,driving:驾车]& ...
随机推荐
- Centos7.3下mysql5.7.18安装并修改初始密码的方法
Centos7.3下mysql5.7.18安装并修改初始密码的方法 原文链接:http://www.jb51.net/article/116032.htm 作者:Javen205 字体:[增加 减小] ...
- 论事件驱动与异步IO
通常我们写服务器模型,有以下几种模型: 每收到一个请求,创建一个新的进程,来处理该请求 每收到一个请求,创建一个新的线程,来处理该请求 每收到一个请求,放入到一个事件中,让主程序通过非阻塞I/0方式来 ...
- spring boot + vue + element-ui全栈开发入门——windows开发环境
一.node.js开发环境 windows系统,去网站https://nodejs.org/en/download/,下载对应的安装程序,并安装Windows Installer (.msi) 接下 ...
- MySQL操作的一些优化
1.用于不要使用select * from table xxx. 需要查询哪些列就在语句中指明,一个表结构复杂时,可能会有上百列,使用*来查询时会造成很大的浪费. 2.选择合适的属性及大小 例如 ...
- BZOJ 3932: [CQOI2015]任务查询系统 [主席树]
传送门 题意: 任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si秒开始,在第Ei秒后结束(第Si秒和Ei秒任务也在运行),其优先级为Pi 调度系统会经常向查询系统询问,第Xi ...
- JDBC【事务、元数据、改造JDBC工具类】
1.事务 一个SESSION所进行的所有更新操作要么一起成功,要么一起失败 举个例子:A向B转账,转账这个流程中如果出现问题,事务可以让数据恢复成原来一样[A账户的钱没变,B账户的钱也没变]. 事例说 ...
- 监督学习:随机梯度下降算法(sgd)和批梯度下降算法(bgd)
线性回归 首先要明白什么是回归.回归的目的是通过几个已知数据来预测另一个数值型数据的目标值. 假设特征和结果满足线性关系,即满足一个计算公式h(x),这个公式的自变量就是已知的数据x,函数值h(x)就 ...
- MDT 2013 从入门到精通之概念扫盲
从今日开始为大家带来微软MDT 2013批量部署操作系统从入门到精通系列教程,旨在为大家以后的工作.学习提供一个便利的参考教程,以便大家更好.更深入的了解微软MDT,从而减轻企业工程师.IT从业人员及 ...
- 读书共享 Primer Plus C-part 12
第十四章 结构和其他数据形式 1.关于上struct与union 的区别 #include<stdio.h> typedef union Book_u { int pags; int mo ...
- js 前端图片压缩+ios图片角度旋转
step1:读取选择的图片,并转为base64: function ImgToBase64 (e, fn) { // 图片方向角 //fn为传入的方法函数,在图片操作完成之后执行 var Orient ...