项目中加入百度地图（调用百度地图的接口）

谁践踏了优雅 2023-02-13 11:06 4阅读 0赞

这里用html调用百度地图做样例  
先总结一下步骤，  
首先需要注册账号，绑定之类的，然后申请一个AK密匙  
然后在百度地图的Demo中替换成自己的AK密匙就行

[点击链接][Link 1] 创建应用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70]  
根据你的需要选择创建相对应的应用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 1]

申请完ak，进行下一步，寻找你所需要的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 2]

寻找示例Demo  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 3]

找到你想要的地图样式，复制对应的代码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 4]  
这里的密匙换成我们上面注册的那个页面的AK

运行即可，

<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,#allmap { width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        
        
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙"></script>
    	<title>浏览器定位</title>
    </head>
    <body>
    	<div id="allmap"></div>
    </body>
    </html>
     
    <script type="text/javascript">
    	// 百度地图API功能
    	var map = new BMap.Map("allmap");    // 创建Map实例
    	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    	//添加地图类型控件
    	map.addControl(new BMap.MapTypeControl({ 
    		mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]}));	  
    	map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    </script>

效果图：  
这里可以切换模式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 5]

**这里有些地图的接口调用不了，小编不清楚为什么，还望大佬赐教**

[Link 1]: http://lbsyun.baidu.com/apiconsole/key#/home
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200528141919433.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200528142041445.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200528142534540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200528142643375.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200528143527936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200528143936725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw,size_16,color_FFFFFF,t_70