<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=1yGIc901IHvG65b3jGUu5nrkWUOYpT3c"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
// 创建地图实例
var point = new BMap.Point(119.306239,26.075302);//福州的经纬度
// 创建点坐标
map.centerAndZoom(point, 10);
// 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom();
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.enableDragging();
marker.addEventListener("dragend", function(e){
alert("当前位置:" + e.point.lng + ", " + e.point.lat);
})
</script>
</body>
</html>
全图显示地区
展示公司地址
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=1yGIc901IHvG65b3jGUu5nrkWUOYpT3c"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
// 创建地图实例
var point = new BMap.Point(119.306239,26.075302);
// 创建点坐标
map.centerAndZoom(point, 16);
// 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom();
var opts = {
width : 500, // 信息窗口宽度
height: 160 // 信息窗口高度
}
var content = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>福州</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=562e2995b7aa3f1a930cf0eb447edace&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2F1b4c510fd9f9d72a25c62d9bd62a2834359bbb91.jpg' width='139' height='104' title='福州'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'><a href='#'>福州,简称“榕”,别称榕城,是福建省省会,国务院批复确定的中国海峡西岸经济区中心城市之一、滨江滨海生态园林城市 [1] 。截至2019年,全市下辖6个区、6个县、和1个县级市,总面积11968平方千米,建成区面积416平方公里 [2-3] , 闽东语福州话为主要方言,并存闽南语闽南话、莆仙话等多种方言。 [118-121] 截至2020年,常住人口8291268人 [124] ,城镇化率70.5%。</a></p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
</script>
</body>
</html>
任意点到公司的路线
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=1yGIc901IHvG65b3jGUu5nrkWUOYpT3c"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
// 创建地图实例
var point = new BMap.Point(119.306239,26.075302);
// 创建点坐标
map.centerAndZoom(point, 16);
// 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom();
// 给map添加事件
map.addEventListener("click", function(e){
map.clearOverlays();
// 添加标注
var point2 = new BMap.Point(e.point.lng, e.point.lat);
var marker = new BMap.Marker(point2); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
// 生成路径
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
driving.search(point2, point);
})
</script>
</body>
</html>
任意点击生成路线