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. sed,n,N,d,D,p,P,h,H,g,G,x,解析

    原文地址 这篇文章主要是我参考命令的,直接复制粘贴,有问题请拍砖 A. sed执行模板=sed '模式{命令1;命令2}' 即逐行读入模式空间,执行命令,最后输出打印出来 B. p打印当前模式空间所有 ...

  2. 获取IP Address

    public string GetUserIp() { var visitorsIpAddr = string.Empty; if (System.Web.HttpContext.Current.Re ...

  3. Vue.js搭建路由报错 router.map is not a function,Cannot read property ‘component’ of undefined

    错误: 解决办法: 2.0已经没有map了,使用npm install vue-router@0.7.13 命令兼容1.0版本vue 但是安装完之后会出现一个错误: Cannot read prope ...

  4. BZOJ 2694: Lcm [莫比乌斯反演 线性筛]

    题意:求\(\sum\limits_{i=1}^n \sum\limits_{j=1}^m lcm(i,j)\ : gcd(i,j) 是sf 无平方因子数\) 无平方因子数?搞一个\(\mu(gcd( ...

  5. 夏令营讲课内容整理 Day 6 Part 1.

    Day6讲了三个大部分的内容. 1.STL 2.初等数论 3.倍增   Part1主要与STL有关. 1.概述 STL的英文全名叫Standard Template Library,翻译成中文就叫标准 ...

  6. COGS 2479. [HZOI 2016]偏序 [CDQ分治套CDQ分治 四维偏序]

    传送门 给定一个有n个元素的序列,元素编号为1~n,每个元素有三个属性a,b,c,求序列中满足i<j且ai<aj且bi<bj且ci<cj的数对(i,j)的个数. 对于100%的 ...

  7. 联合查询到gridview

    using com.DAL.Base; using DAL.ruanmou; using System; using System.Collections.Generic; using System. ...

  8. 小甲鱼OD学习第6讲

    这次我们的任务是破解这个通讯录的软件,首先,我们在通讯录一个分组添加第5个人,发现弹出对话框,限制每组只能添加4个人 并且发现最多只能添加3个分组 我们把程序载入OD,运行,添加人,这个时候点击暂停, ...

  9. 好用的Google漏洞爬虫:Google Mass Explorer

    这是一款基于谷歌搜索引擎的自动化爬虫. 爬虫介绍 爬虫大体机制就是: 先进行一次谷歌搜索,将结果解析为特定格式,然后再提供给exp使用. 大家可以尝试使用–help来列出所有参数. 这个项目笔者会持续 ...

  10. 阿里云ECS服务器上搭建keepalived+mha+mysql5.6+gtid+一主两从+脚本判断架构踩的坑

    最近,公司项目搭建了一套后端数据库架构,不是在RDS,是在阿里云的ECS服务器上搭建keepalived.mha.mysql5.6.gtid.一主两从架构,目前还没有实现读写分离,以后架构升级,可能代 ...