<!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. 2015山东信息学夏令营 Day4T3 生产

    2015山东信息学夏令营 Day4T3 生产 [题目描述] 工厂为了生产一种复杂的产品,给各个生产部门制定了详细的生产计划.那么,就经常会有生产部门要把产品送到另一个生产部门作为原料.这是一个注重产品 ...

  2. HTML5调用传感器的资料汇总

    都可以调用:devicetemperature(温度).devicepressure(压力).devicehumidity(湿度).devicelight(光).devicenoise(声音).dev ...

  3. GDAL源码编译

    转自阿Fai, GDAL源码编译 在这里,我使用源码编译出C#可以使用的dll静态文件. 一.简单的编译 1.简单的认识 首先进入GDAL的源代码目录,可以看到有几个sln为后缀的文件名,比如make ...

  4. maven 手动构建项目

    maven 手动构建项目 在空目录下面: D:\test>mvn -B archetype:generate -DarchetypeGroupId=org.apache.maven.archet ...

  5. Samba.conf案例 Ubuntu

    # Sample configuration file for the Samba suite for Debian GNU/Linux.## This is the main Samba confi ...

  6. 新IOS编程语言 Swift 新编译器Xcode6

    https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programming_ ...

  7. for in、for和EnumerateObjectsUsingBlock遍历的区别

    1.对于集合中对象数很多的情况下,for in 的遍历速度非常之快,但小规模的遍历并不明显(还没普通for循环快) 2. 如果在for in 循环里,对这个数组进行了修改的话,无论是增,删,修改数组元 ...

  8. mysql正则表达式及应用

    mysql where子句的模式匹配 今天在应用中遇到了这样的一个问题,有一个字段 t1,其中的值类似于:1,1,1,2,3,3,4,4,5,5,2,4,3,2,1,2 需要从里面搜索出比如说:第一个 ...

  9. MySQL Study之--MySQL压力測试工具mysqlslap

    MySQL Study之--MySQL压力測试工具mysqlslap 一.Mysqlslap介绍     mysqlslap是MySQL5.1之后自带的benchmark基准測试工具,类似Apache ...

  10. 黑马day16 aptana插件的安装

    aptana: eclipse或者myeclipse中的javaScript,html,css的代码提示功能非常差...因此我们选择了这个框架. aptana的安装步骤: 1.须要下载aptana的插 ...