要有服务器才行哦

<!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{position: fixed; height:100%; width: 100%; overflow: hidden;}
        .actionMap{
            padding: 5px 12px;
            font-size: 13px;
            width: auto;
            display: inline-block;
            margin: 0 5px;
            border-radius: 5px;
            background: #0275d8;
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dP93wprs2ft8NHOB3s5mesN0SBTpLqgf"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title>给多个点添加信息窗口</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图初始化    
    map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(121.232719,41.538947), 12);
    
    //    我的位置
    var myJingdu=null,myWeidu = null;
    var geolocation = new BMap.Geolocation();   
    var gc = new BMap.Geocoder();
    geolocation.getCurrentPosition(function(r){  
        if(this.getStatus() == BMAP_STATUS_SUCCESS){  
            myJingdu = r.point.lng;
            myWeidu = r.point.lat;
        //    alert('您的位置：'+r.point.lng+','+r.point.lat);
        }  
        else {  
            alert('failed'+this.getStatus());  
        }          
    });
    //地图上的控件
    map.enableScrollWheelZoom(true);  //启用滚轮放大缩小
    //地图、卫星、混合模式切换
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]
    }));
    //向地图中添加缩放控件
    var ctrlNav = new window.BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE
    });
    map.addControl(ctrlNav);
    
    //向地图中添加缩略图控件
    var ctrlOve = new window.BMap.OverviewMapControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        isOpen: 1
    });
    map.addControl(ctrlOve);
    
    
    
    
    
    var marker = null;
    function mapAdd(data_info){
        for(var i=0;i<data_info.length;i++){
            var pt = new BMap.Point(data_info[i].point[0],data_info[i].point[1]);//获取坐标点
//            地图缩放等级及偏移
            map.panTo(map.centerAndZoom(new BMap.Point(data_info[2].point[0],data_info[2].point[1]),11));
            var myIcon = new BMap.Icon('markers.png', new BMap.Size(24,35));
                marker = new BMap.Marker(pt,{ icon: myIcon });  // 创建标注
            var content = '<p style="font-size:13px;border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:5px 0;line-height:22px"><a>' + data_info[i].tel + '</a></br>' + data_info[i].address + '</br></p><p style="text-align:center;"><a class="actionMap" href="javascript:actionTo(\'byBus\',\''+data_info[i].point[0]+'\',\''+data_info[i].point[1]+'\');" target="_blank">公交</a><a class="actionMap" href="javascript:actionTo(\'DrivingRoute\',\''+data_info[i].point[0]+'\',\''+data_info[i].point[1]+'\');" target="_blank">驾车</a><a class="actionMap" href="javascript:actionTo(\'WalkingRoute\',\''+data_info[i].point[0]+'\',\''+data_info[i].point[1]+'\');" target="_blank">徒步</a></p>';
            var shopTitle = "<span style='font-weight:600;'>"+data_info[i].title+"</span>";
            map.addOverlay(marker);  // 将标注添加到地图中
            addClickHandler(content,marker,shopTitle);
        }
        
        function addClickHandler(content,marker,shopTitle){
            marker.addEventListener("click",function(e){
                openInfo(content,e,shopTitle)}
            );
        }
        
        function openInfo(content,e,shopTitle){
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content,{width:200,height:160,title:shopTitle,enableMessage:true});  // 创建信息窗口对象
            map.openInfoWindow(infoWindow,point); //开启信息窗口
        }
    }
    function removeMarker(tag){
        var allOverlay = map.getOverlays();
        console.log(allOverlay);
        for (var i = 0; i < allOverlay.length -1; i++){            
            if(allOverlay[i].getLabel().content == tag){
                map.removeOverlay(allOverlay[i]);
                return false;
            }
        }
    }
</script>
<script>
    $(function(){
        $.ajax({
            url:"ajax2.js",
            beforeSend: function(){
                $("#panel").show();
            },success: function(data){
                var dat = JSON.parse(data);
                mapAdd(dat);
                $("#panel").hide();
            }
        });
    })
    function actionTo(action,jingdu,weidu){
        var p1 = new BMap.Point(myJingdu,myWeidu);
        var p2 = new BMap.Point(jingdu,weidu);
        if(action == "DrivingRoute"){            
            var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
            driving.search(p1, p2);
            driving.setSearchCompleteCallback(function(res){
                if(res.getNumPlans() <= 0){
                    alert("未查询到路线");
                }else{
                    map.clearOverlays();    
                }
            });            
        }else if(action == "WalkingRoute"){
            var walk = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
            walk.search(p1, p2);
            walk.setSearchCompleteCallback(function(res){
                if(res.getNumPlans() <= 0){
                    alert("未查询到路线");
                }else{
                    map.clearOverlays();    
                }
            });            
        }else{
            var transit = new BMap.TransitRoute(map, {
                renderOptions: {map: map}
            });
            transit.search(p1, p2);
            transit.setSearchCompleteCallback(function(res){
                if(res.getNumPlans() <= 0){
                    alert("未查询到路线");
                }else{
                    map.clearOverlays();    
                }
            });
        }
    }
</script>

[

{"title":"义县公安局",

"address":"地址：辽宁省锦州市义县城关街道迎宾路石油机械厂对面",

"tel":"电话：暂无",

"site":"",

"sort":"1",

"point":["121.27026","41.529094"]},

{"title":"义县公安局(义州镇派出所)",

"address":"地址：义州镇西北街",

"tel":"电话：(0416)7715110",

"site":"",

"sort":"1",

"point":["121.247043","41.549419"]},

{"title":"义县公安局森林公安分局",

"address":"地址：振兴路45",

"tel":"电话：暂无",

"site":"",

"sort":"1",

"point":["121.256135","41.533711"]},

{"title":"义县公安局西山分局",

"address":"地址：305国道附近",

"tel":"电话：(0416)7603555",

"site":"",

"sort":"1",

"point":["121.155055","41.527811"]}

]

H5微信通过百度地图API实现导航方式二的更多相关文章

  1. H5微信通过百度地图API实现导航方式一

    根据业务需求修改百度API,实现微信中的导航功能.因为源码中SearchInfoWindow_min.js有点小问题(部分小城市公交线路少,查不到路线时没有提示),所以这里在源码的基础上改了一点点.可 ...

  2. Android 百度地图API 定位 导航

    看看这个利用百度地图定位并实现目的地导航的Demo. 首先看实现效果:                          进 入后首先会得到当前位置,在地图上显示出来.在输入框中输入目的地后,就会在地 ...

  3. C#调用百度地图API经验分享（二）

    接着上一篇,将上一篇代码的js提取出来:<script type="text/JavaScript">var map = new BMap.Map("allm ...

  4. 【百度地图API】让用户选择起点和终点的驾车导航

    原文:[百度地图API]让用户选择起点和终点的驾车导航 摘要: 如果用户搜索“从机场到火车站”,使用驾车导航DrivingRoute会默认显示一条结果.但同一个城市可能有多个机场和火车站,那么,如何用 ...

  5. ***微信LBS地理位置开发+百度地图API(地理位置和坐标转换)

    微信公众平台开发 - 获取用户地理位置 本文介绍在微信公众平台上如何使用高级接口开发获取用户地理位置的功能. 一.获取用户地理位置接口 开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会 ...

  6. 【百度地图API】如何制作自定义样式的公交导航结果面板？

    原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...

  7. 【百度地图API】如何制作多途经点的线路导航——驾车篇

    原文:[百度地图API]如何制作多途经点的线路导航--驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----- ...

  8. 【百度地图API】圣诞节里不会迷路的麋鹿——驾车导航

    原文:[百度地图API]圣诞节里不会迷路的麋鹿--驾车导航 任务描述: 可能大家还不知道,圣诞老人是爱迷路的老爷爷! 今年圣诞节又要到了,圣诞老人又要出来送礼物了.可是,他灰常的迷路呢! 还好,他有一 ...

  9. 微信小程序城市定位(借助百度地图API判断城市)

    概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...

随机推荐

  1. 优化tomcat配置(从内存、并发、缓存4个方面)优化

    Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 java_OPTS 参数. JAVA_OPTS参数 ...

  2. NN-Neural Network

    开始学习神经网络(Neural Network) 已有线性与逻辑回归,为什么需要用到NN 实际的应用中,需要根据很多特征进行训练分类器,当今有两个特征下,可以通过下图表述: 然而还有太多的特征需要考虑 ...

  3. Java集合源码分析之 LinkedList

    一.简介 LinkedList是一个常用的集合类,用于顺序存储元素.LinkedList经常和ArrayList一起被提及.大部分人应该都知道ArrayList内部采用数组保存元素,适合用于随机访问比 ...

  4. 基于Spring的最简单的定时任务实现与配置（一）

    朋友的项目中有点问题.他那边是Spring架构的,有一个比较简单的需要定时的任务执行.在了解了他的需求之后,于是提出了比较简单的Spring+quartz的实现方式. 注意本文只是讨论,在已搭建完毕的 ...

  5. Linux文件管理浅析(一) _磁盘管理基础

    本文主要讨论一些磁盘管理相关的基本概念,同时也是这一系列文章的第一篇,就是下图中的最下一层的一部分. 在Linux中,SATA/USB/SCSI接口都是使用SCSI模块实现的,所以使用这些接口的硬盘在 ...

  6. hibernate 返回对象指定属性，需要返回的列,可以直接返回 对象属性

    // hibernate 返回对象指定属性,需要返回的列,可以直接返回 对象属性 @Override public TeamPlan getTeamPlanByBaoMingId(String bao ...

  7. Kafka 源代码分析.

    这里记录kafka源代码笔记.(代码版本是0.8.2.1) kafka的源代码如何下载.这里简单说一下. git clone https://git-wip-us.apache.org/repos/a ...

  8. 【Android Developers Training】 26. 在SQL数据库中保存数据

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  9. USACO-palsquare 遇到的一个坑

    /** ID: njuwz151 TASK: palsquare LANG: C++ */ #include <iostream> #include <cstdio> #inc ...

  10. OSX MacVim + vim-lldb配置和使用心得

    Mac里面默认的编译器是clang/clang++ 所以debugger就选择了lldb 想搭配MacVim一起使用,于是就找到了vim-lldb这个插件,相当强大   这个插件支持Vundle,所以 ...