网页中插入百度地图详细介绍-低调大师

网页中插入百度地图详细介绍

2018-02-28 840

在很多网页中都有地图标注效果，通常可以引入百度地图或者其他地图，当然百度给我提供了结构，我们只要正确使用即可，下面就通过代码实例介绍一下如何实现此功能。

代码如下:

 
         <!DOCTYPE html>
        
         <
         html
         > 
        
         <
         head
         > 
        
         <
         meta 
         charset
         =
         " utf-8"
         > 
        
         <
         meta 
         name
         =
         "author" 
         content
         =
         "http://www.softwhy.com/" 
         /> 
        
         <
         title
         >蚂蚁部落</
         title
         > 
        
         <!--引用百度地图API-->
        
         <
         style 
         type
         =
         "text/css"
         > 
        
         html, body{
        
         margin:0; 
        
         padding:0; 
        
         }
        
         .iw_poi_title{
        
         color:#CC5522; 
        
         font-size:14px; 
        
         font-weight:bold; 
        
         overflow:hidden; 
        
         padding-right:13px; 
        
         white-space:nowrap 
        
         }
        
         .iw_poi_content{
        
         font:12px arial,sans-serif; 
        
         overflow:visible; 
        
         padding-top:4px; 
        
         white-space:-moz-pre-wrap; 
        
         word-wrap:break-word 
        
         }
        
         #dituContent{
        
         width:697px; 
        
         height:550px; 
        
         border:#ccc solid 1px; 
        
         }
        
         </
         style
         > 
        
         <
         script 
         type
         =
         "text/javascript" 
         src
         =
         "http://api.map.baidu.com/api?key=&v=1.1&services=true"
         ></
         script
         > 
        
         <
         script 
         type
         =
         "text/javascript"
         > 
        
         window.onload=function(){
        
         //创建和初始化地图函数： 
        
         function initMap(){ 
        
         createMap();//创建地图 
        
         setMapEvent();//设置地图事件 
        
         addMapControl();//向地图添加控件 
        
         } 
        
         //创建地图函数： 
        
         function createMap(){ 
        
         var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图 
        
         var point = new BMap.Point(113.116257,27.822879);//定义一个中心点坐标 
        
         map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中 
        
         window.map = map;//将map变量存储在全局 
        
         } 
        
         //地图事件设置函数： 
        
         function setMapEvent(){ 
        
         map.enableDragging();//启用地图拖拽事件，默认启用(可不写) 
        
         map.enableScrollWheelZoom();//启用地图滚轮放大缩小 
        
         map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写) 
        
         map.enableKeyboard();//启用键盘上下左右键移动地图 
        
         } 
        
         //地图控件添加函数： 
        
         function addMapControl(){ 
        
         //向地图中添加缩放控件 
        
         var ctrl_nav=new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); 
        
         map.addControl(ctrl_nav); 
        
         //向地图中添加缩略图控件 
        
         var ctrl_ove=new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); 
        
         map.addControl(ctrl_ove); 
        
         //向地图中添加比例尺控件 
        
         var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); 
        
         map.addControl(ctrl_sca); 
        
         } 
        
         initMap();//创建和初始化地图 
        
         }
        
         </
         script
         > 
        
         </
         head
         > 
        
         <
         body
         > 
        
         <!--百度地图容器-->
        
         <
         div 
         id
         =
         "dituContent"
         ></
         div
         > 
        
         </
         body
         > 
        
         </
         html
         >

以上代码实现了我们的要求，可以在网页中插入百度地图功能，代码中已经做了详细的注释，这里就不多介绍了，不过这里有一个美中不足的地方就是地图的做下面带有百度的logo，感觉不太美观，如果想去掉这个logo可以参阅网页引用百度地图实例代码一章节。

原文发布时间为：2017-2-13

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：网页中插入百度地图详细介绍

微信关注我们

原文链接：https://yq.aliyun.com/articles/573395

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

如何将html的<和>转码

本章节介绍一下如何将html中的左右尖括号进行转码，因为作为html标签的一部分可能会造成布局换乱。代码实例如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE html> < html > < head > < meta charset = " utf-8" > < meta name = "author" content = "http://www.softwhy.com/" /> < title >蚂蚁部落</ title > < script type = "text/javascript" > //将HTML转义为实体 function escape(html){ var elem=document.createElement('div') var txt=document.createTextNode(html) ele...

2018-03-01

919

HTML5 <datalist>标签用法简答介绍

本章节介绍一下介绍一下html5新增的<datalist>标签用法的用法，理论就不多讲了，对于这种标签的应用，一个代码实例能够比一车的话要管用的多，代码实例如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> < html > < head > < meta charset = " utf-8" > < meta name = "author" content = "http://www.softwhy.com/" /> < title >蚂蚁部落</ title > </ head > 喜爱版块:< input list = "source" /> < datalist id = "source" > < option value = "div css教程" > < option value = "javascript教程" >...

2018-03-01

736

发表评论

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。