`

站长 创建百度地图

 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</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}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>

<body>
  <!--百度地图容器-->
  <div style="width:838px;height:223px;border:#e6e6e6 solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    //创建和初始化地图函数:
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
    
    //创建地图函数:
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(113.697679,34.755602);//定义一个中心点坐标
        map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
        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);
    }
    
    //标注点数组
    var markerArr = [{title:"标注的地址",content:"联系方式:000-0000000<br/>公司地址:广东广州天河XX街道",point:"113.697638|34.755714",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
		 ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
			var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
			var iw = createInfoWindow(i);
			var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
			marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });
			
			(function(){
				var index = i;
				var _iw = createInfoWindow(i);
				var _marker = marker;
				_marker.addEventListener("click",function(){
				    this.openInfoWindow(_iw);
			    });
			    _iw.addEventListener("open",function(){
				    _marker.getLabel().hide();
			    })
			    _iw.addEventListener("close",function(){
				    _marker.getLabel().show();
			    })
				label.addEventListener("click",function(){
				    _marker.openInfoWindow(_iw);
			    })
				if(!!json.isOpen){
					label.hide();
					_marker.openInfoWindow(_iw);
				}
			})()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
    
    initMap();//创建和初始化地图
</script>
</html>

 

效果图:

 

 

  • 大小: 109.7 KB
分享到:
评论

相关推荐

    DEDE百度XML地图谷歌地图

    通过这个插件,用户可以直接将生成的XML地图提交到百度站长平台,从而提升网站在百度搜索结果中的可见性。 “谷歌地图”在这里可能是指该插件同时支持生成适用于谷歌搜索引擎的XML地图。谷歌作为全球最大的搜索引擎...

    最新http://muyuge.com/杰奇百度地图txt与谷歌xml双版插件

    总的来说,"杰奇百度地图txt与谷歌xml双版插件"是网站管理员优化SEO策略的利器,它简化了网站地图的创建和维护过程,同时提升了网站在百度和谷歌搜索结果中的表现。正确使用和维护此插件,对于任何依赖于搜索引擎...

    杰奇百度自动推送

    它提供了丰富的功能模块,如内容管理、用户管理、评论系统等,帮助站长快速构建和维护网站。 2. **自动推送**:自动推送是SEO技术的一种,它允许网站在内容发布或更新时,立即通知搜索引擎,以便搜索引擎更快地发现...

    站点地图生成器,5小时百度、google就可以收录你的网站

    5. **提交给搜索引擎**: 生成网站地图后,需在百度站长平台和Google Search Console等工具中提交,以便通知搜索引擎检查和更新索引。 通过合理使用站点地图生成器,网站管理员可以有效提升网站的搜索引擎可见性,...

    宝塔百度推送API插件

    总之,宝塔百度推送API插件是一个方便实用的工具,结合了宝塔面板的易用性和百度的智能云推送服务,为站长提供了一种高效的SEO优化手段。通过熟练掌握这款插件的使用,可以显著提升网站的在线可见性和搜索性能。

    php生成百度sitemap站点地图类

    **PHP生成百度Sitemap站点地图类详解** 在网站优化(SEO)中,Sitemap是一个非常重要的工具,它有助于搜索引擎更好地理解和索引网站内容。百度是中国最大的搜索引擎,因此针对百度优化的Sitemap对于提升国内网站的...

    百度站点地图(百度sitemap)生成方法分享

    综上所述,要创建一个对百度友好的站点地图,首先需要了解站点地图的作用和重要性,接着要熟悉百度站长工具的使用,最后掌握站点地图XML文件的编写和提交流程。对于站长来说,正确地生成和提交站点地图是提升网站在...

    织梦DEDE_XML地图

    4. **提交地图**:生成XML地图后,需要将其URL提交到各大搜索引擎的站长工具,这样搜索引擎就会定期检查这个XML地图,了解网站的最新状态。 5. **更新维护**:每当网站添加新内容或有页面变动时,应更新XML地图并...

    百度Sitemap收录提交工具

    1. **创建Sitemap文件**:首先,你需要创建一个包含网站所有重要页面URL的Sitemap文件。这可以通过各种在线工具或网站构建器的内置功能来完成。Sitemap应遵循特定的XML格式,包括URL、最后修改日期、更改频率和...

    百度主动推送工具1.rar

    网站管理员可以通过登录百度站长账号,手动或批量上传新的URL列表,或者添加站点地图(Sitemap)来告知百度网站的更新情况。这种方式虽然有效,但收录速度可能相对较慢,尤其对于频繁更新的大型网站。 “快速收录...

    百度搜索该如何优化

    同时,利用百度提供的工具如百度站长工具,可以监控网站的索引状态、抓取错误,进行关键词分析,从而更好地调整优化策略。 最后,关注百度的最新算法更新,如MIP(Mobile Instant Pages)和熊掌号,这些都是百度...

    wordpress-sitemap

    在WordPress中,SEO(搜索引擎优化)是提升网站可见性和排名的关键因素之一,而"wordpress-sitemap"的主题就围绕着如何创建和使用WordPress的百度地图模块。这篇文章将深入探讨这一主题,帮助你理解百度地图...

    如何让百度每天更新你的网站

    3. **XML站点地图**:创建并提交XML站点地图到百度站长平台,这有助于搜索引擎了解你的网站结构和最新内容,提高抓取效率。 4. **内链优化**:合理使用内部链接,将新内容与旧内容相互连接,引导爬虫遍历整个网站,...

    网站地图生成工具简单好用

    谷歌搜索引擎的Webmaster Tools和百度的站长平台都提供了提交网站地图的功能,这对于提升网站在这些平台上的可见性至关重要。 使用网站地图生成工具的优势在于其便捷性和自动化。用户无需手动编写XML文件,只需输入...

    杰奇地图-jieqi map

    5. **提交给搜索引擎**:创建完杰奇地图后,需要将其提交到各大搜索引擎的站长平台,以便它们能够找到并使用这个地图。 6. **自动更新**:为了保持地图的时效性,可以设置一个自动更新机制,每当网站内容有变化时,...

    百度页面收录批量查询

    7. **网站地图提交**:创建并提交XML网站地图到百度站长平台,有助于引导爬虫发现和收录网页。 8. **定期检查**:收录情况不是一成不变的,应定期进行批量查询,以便及时发现新页面的收录情况或已收录页面的丢失...

    joomla网站地图

    5. 将生成的网站地图XML文件上传到网站根目录,并在谷歌Webmaster Tools和百度站长平台提交,以通知搜索引擎你的网站已更新了网站地图。 通过以上步骤,你可以有效地优化Joomla网站的搜索引擎优化(SEO),提高其在...

    DEDE地图自动自动生成

    4. **提交地图**:生成完成后,将网站地图URL提交给各大搜索引擎的站长平台,如Google Search Console、百度站长工具等,以便搜索引擎更快地抓取和更新网站内容。 5. **定期更新**:为了保持网站地图的时效性,可以...

    织梦V5.7SP1百度SiteMapXML插件下载140918发布

    对于每个站长来说,创建并提交这样的网站地图对于提升网站的可见性和流量至关重要。尤其在中国市场,百度作为主流搜索引擎,其SiteMap的使用显得尤为关键。 此插件的140918发布意味着它是2014年9月18日更新的,可能...

Global site tag (gtag.js) - Google Analytics