<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="UTF-8">

    <title>百度地图API显示多个标注点带提示的代码</title>

    <!--javascript-->

    <script src="http://www.w3school.com.cn/jquery/jquery.js" type="text/javascript"></script>

</head>

<body>

    <div style="min-height: 600px; width: 100%;" id="map">

    </div>

            <script type="text/javascript">

                var markerArr = [

                    { title: "名称：武汉光谷", point: "114.4204800000, 30.4637200000", address: "光谷广场", tel: "12306" },

                    { title: "名称：武汉汉口", point: "114.2549200000,30.6188900000", address: "汉口齐测试 ", tel: "18500000000" },

                    { title: "名称：武汉火车站", point: "114.4044400000,30.5074100000", address: "武汉火车站的吧房间", tel: "18500000000" },

                    { title: "名称：武汉纺织大学", point: "114.3982300000,30.4857900000", address: "武汉天河广场", tel: "18500000000" }

                ];

                var map; //Map实例

                function map_init() {

                    map = new BMap.Map("map");

                    //第1步：设置地图中心点，武汉日创科技

                    var point = new BMap.Point(114.4089600000,30.4754800000);

                    //第2步：初始化地图,设置中心点坐标和地图级别。

                    map.centerAndZoom(point, 11);

                    //第3步：启用滚轮放大缩小

                    map.enableScrollWheelZoom(true);

                    //第4步：向地图中添加缩放控件

                    var ctrlNav = new window.BMap.NavigationControl({

                        anchor: BMAP_ANCHOR_TOP_LEFT,

                        type: BMAP_NAVIGATION_CONTROL_LARGE

                    });

                    map.addControl(ctrlNav);

                    //第5步：向地图中添加缩略图控件

                    var ctrlOve = new window.BMap.OverviewMapControl({

                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

                        isOpen: 1

                    });

                    map.addControl(ctrlOve);

                    //第6步：向地图中添加比例尺控件

                    var ctrlSca = new window.BMap.ScaleControl({

                        anchor: BMAP_ANCHOR_BOTTOM_LEFT

                    });

                    map.addControl(ctrlSca);

                    //第7步：绘制点

                    for (var i = 0; i < markerArr.length; i++) {

                        var p0 = markerArr[i].point.split(",")[0];

                        var p1 = markerArr[i].point.split(",")[1];

                        var maker = addMarker(new window.BMap.Point(p0, p1), i);

                        addInfoWindow(maker, markerArr[i], i);

                    }

                }

                // 添加标注

                function addMarker(point, index) {

                    var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",

                        new BMap.Size(23, 25), {

                            offset: new BMap.Size(10, 25),

                            imageOffset: new BMap.Size(0, 0 - index * 25)

                        });

                    var marker = new BMap.Marker(point, { icon: myIcon });

                    map.addOverlay(marker);

                    return marker;

                }

                // 添加信息窗口

                function addInfoWindow(marker, poi) {

                    //pop弹窗标题

                    var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';

                    //pop弹窗信息

                    var html = [];

                    html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');

                    html.push('<tr>');

                    html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');

                    html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');

                    html.push('</tr>');

                    html.push('</tbody></table>');

                    var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });

                    var openInfoWinFun = function () {

                        marker.openInfoWindow(infoWindow);

                    };

                    marker.addEventListener("mouseover", openInfoWinFun);

                    return openInfoWinFun;

                }

                //异步调用百度js

                function map_load() {

                    var load = document.createElement("script");

                    load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";

                    document.body.appendChild(load);

                }

                window.onload = map_load;

            </script>

</body>

</html>

2.百度地图显示单个标注点带提示的代码

<script>

         //创建map实例

        var map=new BMap.Map('container');

        //创建点坐标，维度，精度

        var point=new BMap.Point(114.4120690000,30.4807520000);

        //初始化地图，设置中心点坐标和地图级别

        map.centerAndZoom(point,15);

        //创建标注

        var marker=new BMap.Marker(point);

        //将标注添加到地图中

        map.addOverlay(marker);

        var circle=new BMap.Circle(point,300,{

            fillColor:"blue",

            fillOpacity:0.3,

            stokeColor:"blue",

            strokeOpacity:0.5,

            strokeWeight:1

        });

        map.addOverlay(circle);

        var scaleControl = new BMap.ScaleControl();

        map.addControl(scaleControl);// 添加比例尺显示控件

        var infoWindow=new BMap.InfoWindow("这是武汉日创科技有限公司",{

            width:100,

            height:50

        });

        marker.addEventListener("click",function(){

            map.openInfoWindow(infoWindow,point);

        })

        var label = new BMap.Label("这是武汉日创科技有限公司", {//标签内容与标签偏移

            offset : new BMap.Size(20, -10)

        });

        marker.setLabel(label);

        //创建标注

        var point2=new BMap.Point(114,30);

        var marker2=new BMap.Marker(point2);

        //将标注添加到地图中

        map.addOverlay(marker2);

</script>

3.将经纬度转化成具体地址

function map_click(lng,lat){

var map = new BMap.Map(“allmap”);

var point = new BMap.Point(lng,lat);

map.centerAndZoom(point,12);

var geoc = new BMap.Geocoder();

geoc.getLocation(point,function(rs){

var addComp = rs.addressComponents;

alert(addComp.province + “, ” + addComp.city + “, ” + addComp.district + “, ” + addComp.street + “, ” + addComp.streetNumber);

});

}

map_click(104.098225,30.56028);

//参数解析

//@parameter1 lng 传入的经度

//@parameter2 lat 传入的纬度

百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码的更多相关文章

  1. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  2. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  3. 百度地图API显示多个标注点带百度样式信息检索窗口的代码

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

  4. 百度地图API 显示区域边界及地名定位

    百度地图API 显示区域边界及地名定位 这个定位一共用了两个方法组成 一个是定位绘制区域边界线,另一个是地名定位 原理: 当用户输入省.市.县.区这种大地名时,我们要定位用户输入的这个位置,并显示轮廓 ...

  5. 百度地图API显示多个标注点带检索框

    通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  6. 通过百度地图API显示当前位置在地图上（图标显示）--第三方开源--百度地图（二）

    1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...

  7. 关于百度地图API的地图坐标转换问题

    原文:关于百度地图API的地图坐标转换问题 我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准 ...

  8. HTML5地理定位，百度地图API，知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  9. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

随机推荐

  1. NOIP2012 文化之旅

    题目描述 Description 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一种文化超过一次(即如果他学习了某种文化,则他就不能到达其他有这种文化的国家).不同的国家可 ...

  2. openjudge6252 带通配符的字符串匹配

    描述 通配符是一类键盘字符,当我们不知道真正字符或者不想键入完整名字时,常常使用通配符代替一个或多个真正字符.通配符有问号(?)和星号(*)等,其中,“?”可以代替一个字符,而“*”可以代替零个或多个 ...

  3. 通过setContentView设置activity的不同样式

    public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle saved ...

  4. 使用 docker 安装 OpenVAS 漏洞扫描软件

    https://blog.csdn.net/freewebsys/article/details/78804624

  5. Servlet的HelloWorld实例

    以下内容引用自http://wiki.jikexueyuan.com/project/servlet/first-example.html: Servlets是Java类,服务于HTTP请求并实现了j ...

  6. Vuzzer自动漏洞挖掘工具简单分析附使用介绍

    Vuzzer 是由计算机科学机构  Vrije Universiteit Amsterdam.Amsterdam Department of Informatics 以及 International ...

  7. 必测的支付漏洞（一）——使用fiddler篡改支付金额

    互联网产品中常会遇到支付功能,测试人员测试这部分功能时一定要重视,因为如果这部分出现了较严重的bug,将会给公司带来不小的经济损失!如果你测出了问题领导也一定会高兴的!因此测试优先级很高,但具有一定难 ...

  8. SetWindowsHookEx详解

    http://blog.csdn.net/mmllkkjj/article/details/6627188 函数功能:该函数将一个应用程序定义的挂钩处理过程安装到挂钩链中去,您可以通过安装挂钩处理过程 ...

  9. Linux纯Shell实现DNSPod动态域名

    http://www.anrip.com/post/872 开发背景: 公司有台嵌入式拨号上网设备,内置busybox和完整wget命令(支持https协议),但没有curl.python.ruby. ...

  10. 踩坑录-mysql不允许远程连接(错误码：1130) Host'xxx.xxx.xxx.xxx' is not allowed to connect to this MySQL server“

    每次搭建mysql环境都会遇见同样的问题,在此分享一下踩坑笔录. 一.问题描述 安装成功后,本地直接链接远程mysql,默认为不允许远程访问,则客户端提示1130 - Host'xxx.xxx.xxx ...