<!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. SOJ 2749_The Fewest Coins

    [题意]:已知整个交易系统有N (1 ≤ N ≤ 100)种不同的货币,分别价值V1,V2,V3.......VN(1 ≤ Vi ≤ 120),FJ分别有C1,C2,C3.....CN(0 ≤ Ci ...

  2. dubbo服务的group和version

    group 当一个接口有多种实现时,可以用group区分 <!-- dubbo group 使用示例 --> <bean id="demoA" class=&qu ...

  3. Jenkins 使用

    Jenkins 安装 Jenkins是用Java语言开发的系统,首先要确定服务器上已经安装JDK或者JRE. 安装方式一 直接运行java –jar Jenkins.war,在浏览器中输入 http: ...

  4. 通过构建Cocoapods私有库进行组件化开发探索

    专题一 一.创建私有索引库 选Github或者码云都可以,本例以Github为例.创建私有索引库用来作为自己组件库的索引: 二.本地添加私有索引库 添加:pod repo add 索引库名称 索引库地 ...

  5. Python爬虫开发【第1篇】【beautifulSoup4解析器】

    CSS 选择器:BeautifulSoup4 Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. pip 安装:pip instal ...

  6. Android oat文件提取转换

    说明: 1.手机厂商可以修改Android源码并进行编译后再生成oat格式文件在手机上存储,比如boot-okhttp.oat,boot-framework.oat. 2.自带的apk可以调用这些模块 ...

  7. Linux下Gcc 的编译过程

    在linux下开发难免会用到gcc编译.GCC(GNU Compiler Collection.GNU编译器套装),是由 GNU 开发的编程语言编译器.它是GNU编译器套装以GPL许可证所发行的自由软 ...

  8. YTU 2517: 打倒魔王↖(^ω^)↗

    2517: 打倒魔王↖(^ω^)↗ 时间限制: 1 Sec  内存限制: 128 MB 提交: 231  解决: 112 题目描述 从前有一个王子,他喜欢上了邻国的一个公主.终于有一天他向公主表白了, ...

  9. Android下拉刷新

    以下是我自己花功夫编写了一种非常简单的下拉刷新实现方案,现在拿出来和大家分享一下.相信在阅读完本篇文章之后,大家都可以在自己的项目中一分钟引入下拉刷新功能 最近项目中需要用到ListView下拉刷新的 ...

  10. 从Linux内核中获取真随机数

    内核随机数产生器 Linux内核实现了一个随机数产生器,从理论上说这个随机数产生器产生的是真随机数.与标准C库中的rand(),srand()产生的伪随机数不同,尽管伪随机数带有一定的随机特征,但这些 ...