<!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. Linux下汇编语言学习笔记32 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  2. Visual C++ 网络编程 笔记

    第一章 网络分层模型 OSI模型应用层:服务于应用程序的协议,比如用于域名解析的DNS协议,用于下载界面内容的HTTP协议表示层:处理不同硬件和操作系统之间的差异,确保应用层之间顺利通信 and 加密 ...

  3. 【进击后端】Ubuntu 命令行 安装nginx

    一.安装nginx apt-get install nginx 安装路径为:/etc/nginx/conf.d 二.配置nginx,在conf.d目录下新建test.conf 新建文件的命令是vi t ...

  4. PostgreSQL及PostGIS使用

    基础知识 参考文档:http://www.postgis.net/docs/ PostGIS支持的GIS对象是OpenGIS Consortium(OGC)定义的“简单特征”的超集.OpenGIS规范 ...

  5. 配置文件的备份和IOS 的备份

    分享到 QQ空间 新浪微博 百度搜藏 人人网 腾讯微博 开心网 腾讯朋友 百度空间 豆瓣网 搜狐微博 百度新首页 QQ收藏 和讯微博 我的淘宝 百度贴吧 更多... 百度分享 广场 登录 注册 关注此 ...

  6. Lightoj 1027 - A Dangerous Maze 【期望】

    1027 - A Dangerous Maze PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Y ...

  7. 【BLE】CC2541之自己定义长短按键

    本篇博文最后改动时间:2017年01月06日,11:06. 一.简单介绍 本文以SimpleBLEPeripheral为例,介绍怎样将普通IO口(P12)自己定义为长短按键,实现按键3S以内松开为短按 ...

  8. 数学之路-python计算实战(21)-机器视觉-拉普拉斯线性滤波

    拉普拉斯线性滤波,.边缘检測  . When ksize == 1 , the Laplacian is computed by filtering the image with the follow ...

  9. oracle initialization or shutdown in progress 问题解决

    今天登录oracle时遇到oracle initialization or shutdown in progress 这个错误提示,在网上搜了下,试了非常多方法,最后结合几种方法结合,成功攻克了问题! ...

  10. Xamarin iOS开发实战第1章使用C#编写第一个iOS应用程序

    Xamarin iOS开发实战第1章使用C#编写第一个iOS应用程序 C#原本是用来编写Windows以及Windows Phone的应用程序.自从Xamarin问世后.C#的作用就发生了非常大的变化 ...