这是一个多坐标创建，并连线，和信息显示的例子

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

        body, html, #allmap {

            width: 100%;

            height: 100%;

            overflow: hidden;

            margin: 0;

            font-family: "微软雅黑";

        }

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>

    <title></title>

</head>

<body>

    <div>

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

            </div>

            <script type="text/javascript">

                var map; //Map实例

                //后台传过来

                var currentLat = 116.345555;

                var currentLon = 40.018661;

                var my = { title: "我的位置" };

                var markerArr = [

                    { title: "1", point: "116.364531,40.057003",name:"这是一个标题", content:"这是内容" },

                    { title: "2", point: "116.340934,40.013401", name: "这是一个标题", content: "这是内容" },

                    { title: "3", point: "116.342213,40.041267", name: "这是一个标题", content: "这是内容" },

                    { title: "4", point: "116.342223,40.042267", name: "这是一个标题", content: "这是内容" },

                    { title: "5", point: "116.342233,40.043267", name: "这是一个标题", content: "这是内容"},

                ];

                function map_init() {

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

                    //第1步：设置地图中心点，当前城市

                    var point = new BMap.Point(currentLat, currentLon);

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

                    map.centerAndZoom(point, 14);

                    //第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], markerArr[i].name, markerArr[i].content);

                    }

                    //绘制点

                    var points = new Array();

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

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

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

                        var thePoint1 = new BMap.Point(p0, p1);

                        points.push(thePoint1);

                    }

                    drawPolyline(map, points);

                    // 添加信息窗口

                    function addInfoWindow(marker, poi,name, content) {

                        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

                        var label = new window.BMap.Label(poi.title, { offset: new window.BMap.Size(2, 1) });

                        marker.setLabel(label);

                        var clo = "";

                        if ("我的位置" == poi.title) {

                            clo = "#FF5782";

                        } else {

                            clo = "#E6FED";

                        }

                        label.setStyle({

                            color: "#fff",

                            fontSize: "16px",

                            backgroundColor: "0.05",

                            border: "0",

                            fontWeight: "bold"

                        });

                        //maps.addOverlay(lab1);

                        addClickHandler(name,content, marker);

                    }

                }

                function addClickHandler(name,content, marker) {

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

                        openInfo(name,content, e)

                    }

                    );

                }

                function openInfo(name,content, e) {

                    var opts = {

                        width: 250,     // 信息窗口宽度

                        height: 80,     // 信息窗口高度

                        title: name, // 信息窗口标题

                        enableMessage: true//设置允许信息窗发送短息

                    };

                    var p = e.target;

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

                    var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象

                    map.openInfoWindow(infoWindow, point); //开启信息窗口

                }

                // 添加标注

                function addMarker(point, index) {

                    index = 11;

                    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;

                }

                //异步调用百度js

                function map_load() {

                    map_init();

                }

                /**

                 * 画线

                 */

                function drawPolyline(bMap, points) {

                    if (points == null || points.length <= 1) {

                        return;

                    }

                    bMap.addOverlay(new BMap.Polyline(points, {

                        strokeColor: "blue",

                        strokeWeight: 3,

                        strokeOpacity: 0.6

                    })); // 画线

                }

                window.onload = map_load;

            </script>

    </div>

</body>

</html>

效果如下：

百度地图API-创建多个坐标，连线，信息提示的更多相关文章

  1. 利用百度地图API，获取经纬度坐标

    利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...

  2. PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例

    原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程序--> <!DOCTYPE html> <html&g ...

  3. 百度地图API 批量添加 带检索功能的信息窗口

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

  4. 批量调用百度地图API获取地址经纬度坐标

    1 申请密匙 注册百度地图API:http://lbsyun.baidu.com/index.php?title=webapi 点击左侧 “获取密匙” ,经过填写个人信息.邮箱注册等,成功之后在开放平 ...

  5. HTML5结合百度地图API创建地图应用

    具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid ...

  6. js百度地图API创建弧线并修改弧线的弧度

    去百度API官网下载CurveLine.min.js,注意复制下来的Js前面的行号要删除. // 百度地图API功能 var map = new BMap.Map("container&qu ...

  7. js调用百度地图API创建地图，搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  8. js调用百度地图API创建地图

    技术交流群:233513714 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="serv ...

  9. 百度地图api开发：根据坐标获得地理描述地址

    // 创建地理编码实例              var myGeo = new BMap.Geocoder();              // 根据坐标得到地址描述            myGe ...

  10. scrapy爬虫框架调用百度地图api数据存入数据库

    scrapy安装配置不在本文 提及, 1.在开始爬取之前,必须创建一个新的Scrapy项目.进入自定义的项目目录中,运行下列命令 scrapy startproject mySpider 其中, my ...

随机推荐

  1. python3多线程应用详解（第二卷：多线程到底是怎么工作的）

    现在很多人都说用多线程工作快是因为多个不同任务可以同时执行,注意我说的是不同任务,要是重复做一件事达到相同效果就是画蛇添足了,其实这是个错误的说法,线程真正的本质是无法同时执行的.现在我们来看下多线程 ...

  2. generate的使用verilog

    根据项目设计的需要,要实例化多个类似的模块,这些类似的模块包括方波波形发生器,这几个模块基本相同,除了参数传递值不同,其他他部分都是相同的 具体实现代码如下: 此外有计数模块的例化,这个模块例化多个的 ...

  3. springboot 配置热部署 及 热部署后依旧是404的坑

    springboot配置热部署的教程网上一大堆: 个人喜欢这种方式: https://www.cnblogs.com/winner-0715/p/6666579.html 本文主要强调的是,大家如果配 ...

  4. [Redis] Redis哨兵模式部署 - zz胖的博客

    1. 部署Redis集群 redis的安装及配置参考[redis部署] 本文以创建一主二从的集群为例. 1.1 部署与配置 先创建sentinel目录,在该目录下创建8000,8001,8002三个以 ...

  5. Java - 面向对象练习 - market

    Marketpackage market; public class Market {    private String marname;    private Product[] producta ...

  6. python socket粘包及实例

    1.在linux中经常出现粘包的出现(因为两个send近靠着,造成接受到的数据是在一起的.)解决方法: 在服务端两send的中间中再添加一个recv(),客户端添加一个send(),服务端收到信息确认 ...

  7. 【转载】解决StackOverFlow不能登录的问题

    解决StackOverFlow不能登录的问题 原创 2017年04月08日 13:32:21 标签: stack overflow / firefox / 浏览器   今天想着使用谷歌浏览器登录sta ...

  8. 携程酒店DevOps测试实践

    作者简介 王幸福,携程酒店研发部高级测试经理,负责无线自动化测试相关工作.在测试框架和平台研发.移动测试.DevOps等领域有着丰富的经验. 如今很多大型互联网公司.创新型企业都在积极地进行DevOp ...

  9. S07

    push 和 append 的表现不同, push 一次只添加单个参数到列表末端, append 一次可以添加多个参数. use v6; my @d = ( [ 1 .. 3 ] ); @d.push ...

  10. sphinx + mysql 全文索引配置

    参考地址 http://v9.help.phpcms.cn/html/2010/search_0919/35.html http://blog.sina.com.cn/s/blog_705e4fdc0 ...