html部分的代码

  <div class="maxwidth">
        <div class="address clearfix">
            <div class="map-box fl">
                <div id="allmap"></div>
            </div>
            <div class="maptitle fr">
                <span>建和塑胶材料有限公司</span>
                <p>联系人:胡先生</p>
                <p>电子邮箱:hudb@pvc123.com</p>
                <p>联系地址:东莞市南城区高盛科技大厦5楼</p>
                <div class="qqinline">
                    <a href="#">QQ在线咨询</a>
                </div>
            </div>
            <div class="mapimg fr">
                <img src="../static/conaaa.png" />
            </div>
        </div>
        <div class="hot">
            <img src="../static/hot.jpg" />
        </div>
    </div>

css部分代码

.maxwidth{width:1200px;margin:0px auto;}

/*map*/

.map-box{background-color:#fff;width:750px;height:538px;border:1px solid #eee;}
#allmap{width:730px;height:518px;margin:10px;}
span.BMap_Marker label.BMapLabel{border:1px solid #000;border-radius: 3px;}
/*map end*/

js部分代码

        <script src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?ak=nbAwc69Hb3sgKdGHko1HWhSP&amp;v=2.0"></script>
    <script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(113.732756,22.992607);
    map.centerAndZoom(point, 19);
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中

    var label = new BMap.Label("建和塑胶材料有限公司",{offset:new BMap.Size(20,-10)});
    label.setStyle({
            borderColor : "black"

         });
    //marker.addEventListener("click", function(){    //点击弹出可去掉注释
        marker.setLabel(label); //开启信息窗口
    //});  //点击弹出可去掉注释
    </script>    

效果图如下:

  写地图巨有用的地址mark:

百度地图生成器

   http://api.map.baidu.com/lbsapi/creatmap/index.html

        百度地图拾取坐标系统
        http://api.map.baidu.com/lbsapi/getpoint/index.html

        百度地图JavaScript API
        http://lbsyun.baidu.com/index.php?title=jspopular

百度地图API-javascript-web地图的应用的更多相关文章

  1. PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例

    原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程序--> <!DOCTYPE html> <html&g ...

  2. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  3. 高德地图 API JavaScript API

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx ...

  4. 如何在网中使用百度地图API自定义个性化地图

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 百度地图API,展示地图和添加控件

    1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...

  6. HTM L百度地图API 自定义工具地图实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

  8. 使用百度地图API进行Android地图应用开发(Eclipse)

    随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. ...

  9. 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  10. 百度地图API开发----手机地图做导航功能

    第一种方式:手机网页点击打开直接进百度地图APP <a href="baidumap://map/direction?mode=[transit:公交,driving:驾车]& ...

随机推荐

  1. remap.config文件配置模板

    # # URL Remapping Config File # # Using remap.config allows you to accomplish two things: # # 1) Rew ...

  2. java 如何将 word,excel,ppt如何转pdf --openoffice (1)

    承上启下,可折叠 上一篇说的是:服务器是windows server时,用jacob将msoffice(指的是word,excel,ppt)转换成pdf. 若被部署项目的服务器是centOS等linu ...

  3. MongoDB入门系列(三):查询(SELECT)

    一.概述 mongodb是最接近关系型数据库的NOSQL数据库,它的存储方式非常的灵活:以至于你会将它看成是一个经过冗余过的关系型数据库的表,这也是Mongodb原子性的一个特征.由于没有关系型数据库 ...

  4. HTML5中的Web Notification桌面通知

    大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知.本篇博客就在这里简单的介绍一下如何实现这样的功能. ...

  5. python学习--Linux下dlib安装(主要是cmake和boost的安装)

    昨天我们使用了dlib和opencv进行了人脸检测标注(http://www.cnblogs.com/take-fetter/p/8310298.html) 但是运行环境是基于windows的而且可能 ...

  6. Java:对象的强、软、弱和虚引用[转]

    原文链接:http://zhangjunhd.blog.51cto.com/113473/53092/ 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法 ...

  7. BZOJ 3879: SvT [虚树 后缀树]

    传送门 题意: 多次询问,给出一些后缀,求两两之间$LCP$之和 哈哈哈哈哈哈哈竟然$1A$了,刚才还在想如果写不好这道题下节数学就不上了,看来是上天让我上数学课啊 $Suffix\ Virtual\ ...

  8. 线性一致性与全序广播------《Designing Data-Intensive Applications》读书笔记12

    上一篇聊了聊构建分布式系统所面临的困难,这篇将着重讨论构建容错分布式系统的算法与协议.构建容错系统的最佳方法是使用通用抽象,允许应用程序忽略分布式系统中的一些问题.本篇我们先聊一聊线性一致性,以及与线 ...

  9. SpringBoot入门Demo

    前言:相信做java后台编程的童鞋都知道Spring家族,Spring作为我们项目中必备的框架.JavaSpringBoot号称javaEE的颠覆者,这引起了本Y的好奇,这才花费了一点时间,学习了下s ...

  10. ubuntu下安装memcached与php扩展测试使用

    1,memcached需要libevent,所以要先安装它 下载地址:http://download.chinaunix.net/download.php?id=45065&ResourceI ...