百度地图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:驾车]& ...
随机推荐
- remap.config文件配置模板
# # URL Remapping Config File # # Using remap.config allows you to accomplish two things: # # 1) Rew ...
- java 如何将 word,excel,ppt如何转pdf --openoffice (1)
承上启下,可折叠 上一篇说的是:服务器是windows server时,用jacob将msoffice(指的是word,excel,ppt)转换成pdf. 若被部署项目的服务器是centOS等linu ...
- MongoDB入门系列(三):查询(SELECT)
一.概述 mongodb是最接近关系型数据库的NOSQL数据库,它的存储方式非常的灵活:以至于你会将它看成是一个经过冗余过的关系型数据库的表,这也是Mongodb原子性的一个特征.由于没有关系型数据库 ...
- HTML5中的Web Notification桌面通知
大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知.本篇博客就在这里简单的介绍一下如何实现这样的功能. ...
- python学习--Linux下dlib安装(主要是cmake和boost的安装)
昨天我们使用了dlib和opencv进行了人脸检测标注(http://www.cnblogs.com/take-fetter/p/8310298.html) 但是运行环境是基于windows的而且可能 ...
- Java:对象的强、软、弱和虚引用[转]
原文链接:http://zhangjunhd.blog.51cto.com/113473/53092/ 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法 ...
- BZOJ 3879: SvT [虚树 后缀树]
传送门 题意: 多次询问,给出一些后缀,求两两之间$LCP$之和 哈哈哈哈哈哈哈竟然$1A$了,刚才还在想如果写不好这道题下节数学就不上了,看来是上天让我上数学课啊 $Suffix\ Virtual\ ...
- 线性一致性与全序广播------《Designing Data-Intensive Applications》读书笔记12
上一篇聊了聊构建分布式系统所面临的困难,这篇将着重讨论构建容错分布式系统的算法与协议.构建容错系统的最佳方法是使用通用抽象,允许应用程序忽略分布式系统中的一些问题.本篇我们先聊一聊线性一致性,以及与线 ...
- SpringBoot入门Demo
前言:相信做java后台编程的童鞋都知道Spring家族,Spring作为我们项目中必备的框架.JavaSpringBoot号称javaEE的颠覆者,这引起了本Y的好奇,这才花费了一点时间,学习了下s ...
- ubuntu下安装memcached与php扩展测试使用
1,memcached需要libevent,所以要先安装它 下载地址:http://download.chinaunix.net/download.php?id=45065&ResourceI ...