您的位置：首页 > Web前端 > JavaScript

html/jsp 引用百度地图极其部分功能

2015-11-29 00:11 387 查看

引用百度地图首先要使用它的api，1.4版本之前直接引用就可以，后来随着版本升级，需要加上你申请的密钥key。当然版本越高，它支持的功能更加丰富，所以建议大家使用的时候最好引用1.4以上的api;

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

<script type="text/javascript">

var map = new BMap.Map("map");// 创建地图实例

var point = new BMap.Point(114.066, 22.616);// 创建坐标

map.centerAndZoom(point, 12);// 初始化点中心点坐标和地图级别

map.enableScrollWheelZoom();// 开启鼠标滑轮缩放

window.map = map;//设置全局map

//关键词查询

function search(thing){

      var local = new BMap.LocalSearch(map, {renderOptions : {map : map}});

      local.search(thing);

}

//坐标添加到地图，并为其设置监听弹窗信息

function infoWindow(point){

var thIcon1 = new BMap.Icon('url/tyLevel1.png', new BMap.Size(8, 8));//自定义标注及样式

var marker=new BMap.Marker(point,{icon:thIcon1,offset:new BMap.Size(0,0)});//将坐标添加到marker标记中

map.addOverlay(marker);//标记添加到地图

var opts ={

    width: 260,     // 信息窗口宽度

    height: 150,     // 信息窗口高度

    title: '<span style="font-size:14px;color:#0A8021;font-weight:bold;">详情如下</span>'// 信息窗口标题

}

marker.addEventListener("click",function(e){//给标记添加监听

openInfo(content,opts,e);

});

}

//信息窗口

function openInfo(content,opts,e){

var p=e.target;

var points=new BMap.Point(p.getPosition().lng,p.getPosition().lat);

var infoWindow=new BMap.InfoWindow(content,opts);//创建信息窗口

map.openInfoWindow(infoWindow,points);//开启信息窗口

}

//地图画线 tArrAll存放坐标点的数组

function drawLine(tArrAll){

var curve=new BMap.Polyline(ArrAll,{strokeColor:"#000",strokeWeight:3,strokeOpacity:0.8});//创建线

map.addOverlay(curve);

}

//地图画范围圈

function drawCircle(){

//将圆圈添加到地图中(point坐标,100000范围)

map.addOverlay(new BMap.Circle(point,100000,{strokeColor:"red", strokeWeight:4,strokeOpacity:0.5, strokeStyle:"dashed", fillColor:"", fillOpacity:0.3}));

map.addOverlay(new BMap.Circle(point,300000,{strokeColor:"yellow", strokeWeight:3,strokeOpacity:0.5, strokeStyle:"dashed", fillColor:"", fillOpacity:0.3}));

map.addOverlay(new BMap.Circle(point,500000,{strokeColor:"green", strokeWeight:2,strokeOpacity:0.5, strokeStyle:"dashed", fillColor:"", fillOpacity:0.3}));

//建立文字标签(100km地图上显示的文字)

var label_100 = new BMap.Label("100KM",{offset:new BMap.Size(0,0),position:new BMap.Point(113.891566, 21.611789)});

var label_300 = new BMap.Label("300KM",{offset:new BMap.Size(0,0),position:new BMap.Point(113.891566, 19.850723)});

var label_500 = new BMap.Label("500KM",{offset:new BMap.Size(0,0),position:new BMap.Point(113.891566, 18.091655)});

var label_Style = {color:"white",fontSize:"12px",border:"none",fontWeight:"bold",backgroundColor:""};

//将标签添加到地图上

map.addOverlay(label_100);

map.addOverlay(label_300);

map.addOverlay(label_500);

//设置label标签样式

label_100.setStyle(label_Style);

label_300.setStyle(label_Style);

label_500.setStyle(label_Style)

}

map.clearOverlays();// 清除地图上覆盖物

</script>

<body>

        <div id="map" style="设置你自己的样式"></div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航