百度地图API相关代码片段-前端撸码笔记

1、已知地点坐标，在百度地图中标识出来代码

var map = new BMap.Map(“allmap”);
var point = new BMap.Point(120.381401,36.096903);//中心点坐标
map.centerAndZoom(point, 19);//显示级别数字越大范围越小比如1是全球范围 19具体到街道
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中

2、点击标注的图标，获取图标坐标信息

在以上代码之下添加如下代码：
marker.addEventListener(“click”,getAttr);
function getAttr(){
var p = marker.getPosition(); //获取marker的位置
alert(“marker的位置是” + p.lng + “,” + p.lat);
}

3、点击任意地点获取坐标

var map = new BMap.Map(“allmap”);
map.centerAndZoom(“重庆”,12); //定位到某个具体城市
//单击获取点击的经纬度
map.addEventListener(“click”,function(e){
alert(e.point.lng + “,” + e.point.lat);
});

4、添加多个坐标点

var map = new BMap.Map(“allmap”);
var point = new BMap.Point(120.381401,36.096903);
map.centerAndZoom(point, 19);
// 编写自定义函数,创建标注
function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
var point = new BMap.Point(120.381412,36.096903);
addMarker(point);
var point = new BMap.Point(120.381512,36.096903);
addMarker(point);
var point = new BMap.Point(120.381512,36.097003);
addMarker(point);

4、自定义坐标图标样式

var pt = new BMap.Point(116.417, 39.909);//设置坐标
var myIcon = new BMap.Icon(“http://developer.baidu.com/map/jsdemo/img/fox.gif”, new BMap.Size(300,157));//嵌入自定义图片， new BMap.Size(300,157) 设置图片宽高
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中

实例代码：

5、根据两点标注步行路线（有个bug就是如果两个坐标点离的很近或者是在小区里，定位出的路线真心蛋疼）
var map = new BMap.Map(“allmap”);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var myP1 = new BMap.Point(116.380967,39.913285); //起点
var myP2 = new BMap.Point(116.424374,39.914668); //终点
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); //创建步行实例
driving.search(myP1, myP2); //显示一条步行线路

6、计算两点距离
var pointA = new BMap.Point(106.486654,29.490295); // 创建点坐标A
var pointB = new BMap.Point(106.581515,29.615467); // 创建点坐标B
alert(‘两点距离是：’+(map.getDistance(pointA,pointB)).toFixed(2)+’ 米。’);

7、根据某个范围画圆，比如显示某个点1000米范围
var circle = new BMap.Circle(mPoint,1000,{fillColor:”blue”, strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
map.addOverlay(circle);

先整理这么多吧。

未经允许不得转载：前端撸码笔记 » 百度地图API相关代码片段

内容推荐