javascript 百度地图
官方地址
http://lbsyun.baidu.com/index.php?title=jspopular
示例地址
http://developer.baidu.com/map/jsdemo.htm#c1_2
坐标搜索识别
http://api.map.baidu.com/lbsapi/getpoint/index.html
我的deme
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微软雅黑"; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wScbqRzRMx2ppMWkX7IVZQ4HIvNynxdL"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script> <title>地图展示</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 创建Map实例 var map = new BMap.Map("allmap"); // 地图坐标 var point = new BMap.Point(113.893747,22.949707); // 初始化地图,设置中心点坐标和地图级别 map.centerAndZoom(point,19); //开启鼠标滚轮缩放 map.enableScrollWheelZoom(true); //右上角地图类型控件 map.addControl(new BMap.MapTypeControl()); //将地图显示范围设定在指定区域,地图拖出该区域后会重新弹回。 var b = new BMap.Bounds(new BMap.Point(113.893747,22.949707),new BMap.Point(113.893747,22.949707)); try { BMapLib.AreaRestriction.setBounds(map, b); } catch (e) { console.log(e); } // 创建标注 var point = new BMap.Point(113.893747,22.949707); var marker = new BMap.Marker(point); map.addOverlay(marker); // 将标注添加到地图中 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 // 复杂的自定义覆盖物 function ComplexCustomOverlay(point, text, mouseoverText){ this._point = point; this._text = text; this._overText = mouseoverText; } ComplexCustomOverlay.prototype = new BMap.Overlay(); ComplexCustomOverlay.prototype.initialize = function(map){ this._map = map; var div = this._div = document.createElement("div"); div.style.position = "absolute"; div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); div.style.backgroundColor = "#EE5D5B"; div.style.border = "1px solid #BC3B3A"; div.style.color = "white"; div.style.height = "18px"; div.style.padding = "2px"; div.style.lineHeight = "18px"; div.style.whiteSpace = "nowrap"; div.style.MozUserSelect = "none"; div.style.fontSize = "12px" var span = this._span = document.createElement("span"); div.appendChild(span); span.appendChild(document.createTextNode(this._text)); var that = this; var arrow = this._arrow = document.createElement("div"); arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat"; arrow.style.position = "absolute"; arrow.style.width = "11px"; arrow.style.height = "10px"; arrow.style.top = "22px"; arrow.style.left = "10px"; arrow.style.overflow = "hidden"; div.appendChild(arrow); div.onmouseover = function(){ this.style.backgroundColor = "#6BADCA"; this.style.borderColor = "#0000ff"; this.getElementsByTagName("span")[0].innerHTML = that._overText; arrow.style.backgroundPosition = "0px -20px"; } div.onmouseout = function(){ this.style.backgroundColor = "#EE5D5B"; this.style.borderColor = "#BC3B3A"; this.getElementsByTagName("span")[0].innerHTML = that._text; arrow.style.backgroundPosition = "0px 0px"; } map.getPanes().labelPane.appendChild(div); return div; } ComplexCustomOverlay.prototype.draw = function(){ var map = this._map; var pixel = map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px"; this._div.style.top = pixel.y - 30 + "px"; } var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(113.893860,22.949800), "我们在这里等你哦","微餐时代信息科技有限公司"); map.addOverlay(myCompOverlay); </script>
javascript 百度地图的更多相关文章
- javascript百度地图使用(根据地名定位、根据经纬度定位)
需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntms/yunparter/invite.html? ...
- javascript百度地图添加一个普通标注点(2014-3-8 记)
1.导入jquery.js文件:<script type="text/javascript" src="js/jquery.js"></scr ...
- javascript 百度地图无秘钥(appkey)创建marker标记地图
创建简单的marker地图不一定需要去百度地图申请key,简单代码实现marker地图,效果如图: html代码如下,代码中的baidu.api.js参考后面的隐藏代码: <!DOCTYPE h ...
- (JavaScript) 百度地图与腾讯地图坐标转换
/** * 坐标转换,百度地图坐标转换成腾讯地图坐标 * lng 腾讯经度(pointy) * lat 腾讯纬度(pointx) * 经度>纬度 */ function bMapToQQMap( ...
- javascript 百度地图API - demo
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 最全面的百度地图JavaScript离线版开发
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5822231.html 项目要求web版百度地图要离线开发.这里总结下自己的开发过程和经验. 大概需求是:每辆 ...
- 百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
- 百度地图JavaScript API本地搜索的结果面板
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 使用百度地图JavaScript实现驾车/公交/步行导航功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- LoadRunner11录制APP脚本(1)
1.测试准备: a.首先安装LoadRunner11.0的版本跟新
- 用js完成毫秒格式数据的日期格式化任务
后台传过来的数据 creationTime 在后台是Date类型的 毫秒转换成 05-24 月 日格式的 //获得月日得到日期oTime function getMoth(str){ var ...
- JavaScript设计模式——单体模式
一:单体模式简介: 是什么:将代码组织为一个逻辑单元,这个单元中的代码通过单一的变量进行访问.只要单体对象存在一份实例,就可以确信自己的所有代码使用的是同样的全局资源. 用途:1.用来划分命名空间,减 ...
- cf 106C
题目链接:http://vjudge.net/contest/139376#problem/E 题意看注释就能懂了,求能获得的最大价值. 代码: #include<iostream> #i ...
- Angular JS 学习之过滤器
1.过滤器可以使用一个管道字符(|)添加到表达式和指令中: 2.AngularJS过滤器可用于转换数据: **currency:格式化数字为货币格式: **filter:从数组项中选择一个子集: ** ...
- HDU 4858 项目管理 分块
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4858 题解: 下面说一个插入查询时间复杂度为sqrt(m)的算法: 对每个点定义两个值:val,su ...
- 学习使用MAC
Mac:指苹果笔记本.台式机.分为:MacBook Air.MacBook Pro.iMac.Mac mini和Mac Pro.有时也指苹果电脑操作系统,分:雪豹.山狮.巨浪和优山美地. iOS:指苹 ...
- zoj 3795 Grouping tarjan缩点 + DGA上的最长路
Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%lld & %llu Submit Status Practic ...
- 使用Spring的JAVA Mail支持简化邮件发送
http://www.cnblogs.com/codeplus/archive/2011/11/03/2232893.html
- http://blog.csdn.net/chenleixing/article/details/43740759
http://blog.csdn.net/chenleixing/article/details/43740759