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 ...

随机推荐

Eclipse中Ctrl+方法名发现无法进入到该方法中……
我现在的情况是,按住Ctrl点击该方法后,发现进入不到这个方法的定义. 后来我发现,是因为这个项目是在某个项目文件夹中,如下: 这时直接找到server这个项目就没有问题了,如图:
05_Java异常(Exception)
1. 异常的概念 1.1什么是异常异常指的是程序运行时出现的不正常情况. 1.2异常的层次 Java的异常类是处理运行时的特殊类,每一种异常对应一种特定的运行错误.所有Java异常类都是系统类库中E ...
关于最近Google无法正常访问的变通之法(已经被墙)
对于习惯使用谷歌搜素的骚年最近可能比较蛋疼,没这方面需求的就另当别论.可能是政府限制加强的原因,有时访问谷歌在香港服务器也不大好使,不过最近发现,不通过谷歌域名而直接使用谷歌的ip来访问谷歌响应速度可 ...
DFS(连通块) ZOJ 2743 Bubble Shooter
题目传送门题意:从炮台射出一个球,三个及以上颜色相同的会掉落,问最后会掉落多少个球分析:先从炮台找一个连通块,然后与顶部连接的连通块都不会掉落,剩下的就是炮台射出后跟随掉落的. #include ...
uva748 - Exponentiation
import java.io.*; import java.text.*; import java.util.*; import java.math.*; public class Exponenti ...
连连看[HDU1175]
连连看 Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
关于storm的Spout、Bolt、及其可靠性
本文导读: Component全家谱结构图 Spout分析 ——类图 ——分析(接口实现).结论 ——可靠的与不可靠的消息(推荐) Bolt分析 ——类图 ——分析(接口实现).结论 ——可靠的与不 ...
Android 推送实现
解决数据同步的问题:常用的方法有2种. (1) 定时去服务器上查询数据,也叫Polling. (2) 手机跟服务器之间维护一个 TCP 长连接,或者使用SMS,当服务器有数据时,实时推送到客户端,也就 ...
使用TCMalloc优化OpenResty
1.安装依赖包 yum -y install wget gcc gcc-c++ -y 2.安装libunwind库可以从http://ftp.twaren.net/Unix/NonGNU//libun ...
topcoder SRM 625 DIV2 AddMultiply
由于题目告诉肯定至少存在一种解, 故只需要根据条件遍历一下, vector <int> makeExpression(int y) { vector<int> res; ; i ...

javascript 百度地图

javascript 百度地图的更多相关文章

随机推荐

热门专题