百度地图(添加删除覆盖物)

<style>

body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

#allmap{height:500px;width:100%;}

#r-result{width:100%;}

</style>

<script  type="text/javascript"  src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

<div id="allMap"></div>

<div id="r-result">

<input  type="button"  onclick="add_overlay();"value="添加覆盖物"/>

<input  type="button"onclick="remove_overlay();" value="删除覆盖物"/>

</div>

<script>

//百度API功能

var  map  = new  BMap.Map("allmap");

var point  = new  BMap.point(116.404,39.915);

map.centerAndZoom(point,15);


var  marker = newBMap.Marker(new BMap.point(116.404,39.915));

//创建点

var circle = new BMap.polyline([

new BMa.point(116.399,39.910),

new BMap.point(116.405,39.920),

new BMap.point(116.425,39.900)

],{strokeColor:"biue",strokeweight:2,strokeOpacity:0.5});

//创建折线

var  circle = new  BMap.circle(point,500,{strokeColor:"blue", strokeweight:2, strokeOpatity:0.5}); //创建圆


var polygon  =  new  BMap.polygon([

new  BMap.point(116.387112,39.920977),

new BMap.point(116.385243,39.913063),

new Bmap.point(116.394226,39.917988),

new BMap.point(116.41248,39.927893)

],{strokeColor:"biue",strokeweight:2,strokeopacity:0.5});

//创建多边形

var pStart= new  BMap.piont(116.392214,39.918985);

var  pEnd  = new  BMap.point(1160.41478,39.911901);

var  rectangle=new BMap.polygon([

   new BMap.point(pStart.lng,pStart.lat),

  new  BMap.point(pEnd.lng,pStart.lat),

  new  BMap.point(pEnd.lng,pEnd.lat),

  new BMa.point(pStart.lng,pEnd.lat)

],{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});

//创建矩形

//添加覆盖物

function add_overlay(){

map.addOverlay(marker);       //增加点

map.addOverlay(polyline);     //增加折线

map.addOverlay(circle);         //增加圆

map.addOverlay(polygon);        //增加多边形

map.addOverlay(rectangle);     //增加矩形

}

//清除覆盖物

functionremove_overlay(){

map.clearOverlays();

}

</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容