JavaScript对接百度地图
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript对接百度地图，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4387字，纯文字阅读大概需要7分钟。
内容图文
1、首先申请一个百度地图开发者账号
http://lbsyun.baidu.com/apiconsole/key#/home
2、创建一个应用，应用类别选择浏览器端
3、在我的应用里可以拿到自己的ak
4、入门案例
demo01.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="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=ZasW4IyWCQB0zSRXLlN0L7sy2jKAG9">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例
var point = new BMapGL.Point(116.404, 39.915);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>
结果：
5、简单的地图api调用
有需要应该查看相关的官方地图api
demo01.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:80%}
body{height:80%;margin:0px;padding:0px}
#container{height:80%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=ZasW4IyWCQB0zSRXLlN0L7sy2jKAG">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 创建地图实例
var point = new BMapGL.Point(107.875425,31.089558);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
//设置地图旋转角度
map.setHeading(64.5);
//设置地图的倾斜角度
map.setTilt(73);
map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
</script>
</body>
</html>
demo02.html
<!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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
#r-result{width:100%;}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=ZasW4IyWCQB0zSRXLlN0L7sy2jKAG"></script>
<title>添加/删除覆盖物</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<input type="button" onclick="add_overlay();" value="添加覆盖物" />
<input type="button" onclick="remove_overlay();" value="删除覆盖物" />
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMapGL.Map("allmap");
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915)); // 创建点
var polyline = new BMapGL.Polyline([
new BMapGL.Point(116.399, 39.910),
new BMapGL.Point(116.405, 39.920),
new BMapGL.Point(116.425, 39.900)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建折线
var circle = new BMapGL.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
var polygon = new BMapGL.Polygon([
new BMapGL.Point(116.387112,39.920977),
new BMapGL.Point(116.385243,39.913063),
new BMapGL.Point(116.394226,39.917988),
new BMapGL.Point(116.401772,39.921364),
new BMapGL.Point(116.41248,39.927893)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建多边形
var pStart = new BMapGL.Point(116.392214,39.918985);
var pEnd = new BMapGL.Point(116.41478,39.911901);
var rectangle = new BMapGL.Polygon([
new BMapGL.Point(pStart.lng,pStart.lat),
new BMapGL.Point(pEnd.lng,pStart.lat),
new BMapGL.Point(pEnd.lng,pEnd.lat),
new BMapGL.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); //增加矩形
}
//清除覆盖物
function remove_overlay(){
map.clearOverlays();
}
add_overlay();
</script>
多看百度地图API
内容总结
以上是互联网集市为您收集整理的JavaScript对接百度地图全部内容，希望文章能够帮你解决JavaScript对接百度地图所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】