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

[Javascript]5分钟嵌入百度地图

2017-03-27 12:06 309 查看

最近共享单车挺火，打开地图就可以搜出附近有没有空闲的单车。技术上看似高大上，其实像我们这种屌丝程序员也做得出来，因为里边最高大上的组件其实大公司们都做好了，并且是免费提供给个人使用的（当然商业使用还是要付费的）。拿百度地图来说，我们只需要会Javascript，就可以轻松在我们的网页上嵌入一个地图。

首先我们要上百度地图开发平台，注册个账号，然后申请密钥（AK）。不要觉得密钥很难搞，其实就是一串加密的字符串，跟身份证号一样，用来标识我们网站的身份的，这样每个网站使用的地图就能区分开来了。密钥申请好马上就可以使用，申请过程应该不超过3分钟。

每创建一个应用，就会生成一个密钥。应用分为Web开发、Android开发和iOS开发三种，这里我们是申请了一个用于Web开发的密钥。

有了密钥就好办了，马上可以动手写代码。

当然写个共享单车的应用还是需要点时间的，有兴趣的话可以自行研究，百度地图开发平台也有共享单车的解决方案可以参考。

有没有简单而实用的例子呢？当然有，比如说往公司网站加入百度地图，并在公司所在坐标显示公司LOGO。

以下是代码，比起网上其他同类代码，已经精简地不能再精简了，拷贝粘贴加运行应该用不了2分钟：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></script>

<style type="text/css">
html,body {
width: 100%;
height: 100%
}

#baiduMap {
width: 50%;
height: 50%;
margin:0 auto;
}
</style>

<script type="text/javascript">
function createMap(){
var map = new BMap.Map("baiduMap");//创建百度地图实例
var point = new BMap.Point(113.943062,22.54069);//深圳大学的经纬度坐标
map.centerAndZoom(point, 20);//将地图中心移动到我们指定的地点

var myIcon = new BMap.Icon("img/smile.png", new BMap.Size(25, 23));
var marker = new BMap.Marker(point,{icon: myIcon});
map.addOverlay(marker);//在我们指定的地点显示一个笑脸
}
</script>
</head>

<body onload="createMap()">
<div id="baiduMap"></div>
</body>
</html>

*注意将以上代码中“XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”的部分换成你申请到的密钥。

执行结果：

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

标签：

相关文章推荐

新的分享

章节导航