精华内容
下载资源
问答
  • 百度地图开发 javascriptAPI,增删标记,路线规划
    2020-05-10 17:34:58

    百度地图开发 javascriptAPI,增删标记,路线规划

    初始进入,浏览器定位当前位置并进行标记,点击进行标记,可以在地图上单击进行标记一个点,该点可以移动,取消标记,单击不会进行标记,删除标记会将所有的标记删除,双击标记会对单个标记进行删除,规划路线是将所有的标记点进行驾车路线规划,并且每次规划不保存历史轨迹

    <!DOCTYPE html>
    
    <html>
    <head>
       
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>百度地图练习</title>
        <style type="text/css">
            body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
            #allmap {width: 100%; height:500px; overflow: hidden;}
            #result {width:100%;font-size:12px;}
            dl,dt,dd,ul,li{
                margin:0;
                padding:0;
                list-style:none;
            }
            p{font-size:12px;}
            dt{
                font-size:14px;
                font-family:"微软雅黑";
                font-weight:bold;
                border-bottom:1px dotted #000;
                padding:5px 0 5px 5px;
                margin:5px 0;
            }
            dd{
                padding:5px 0 0 5px;
            }
            li{
                line-height:28px;
            }
            </style>
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    
    
        
    
    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5h50mdGk3BTY8Zb9SfuxLYmZOKZ4puw7"></script>
    </head>
    <body>
    
    <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">	
        <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
    </div>
    <div id="result">
    <input type="button" value="进行标记" onclick="PlaceSign()"/>
    <input type="button" value="取消标记" onclick="CancelSign()"/>
    <input type="button" value="删除标记" onclick="DeleteSign()"/>
    <input type="button" value="规划路线" onclick="route()"/>
    <!-- <input type="button" value="批量反地址解析+商圈" onclick="bdGEO(0)" /> -->
    <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    </div>
    
    </body>
    </html>
    <script type="text/javascript">
       // var city = "北京";
        // 创建地图实例
        //位于BMap命名空间下的Map类表示地图,通过new可以创建一个地图实例。参数可以是元素id也可以是元素对象
        //enableMassClear()     disableMassClear()
    
    
        var map = new BMap.Map("map"); // 百度地图API功能
        map.enableScrollWheelZoom(); // 启用滚轮放大缩小,默认禁用
        map.enableContinuousZoom(); // 启用地图惯性拖拽,默认禁用
        map.addControl(new BMap.NavigationControl());  // 添加默认缩放平移控件
        map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
        map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
        map.addControl(new BMap.OverviewMapControl());  // 添加缩略地图控件
        map.setViewport(Arrayp);  //标记视野最佳
        ///-------------------------------------------------------------------///
        var point = new BMap.Point(116.331398,39.897445);
    	map.centerAndZoom(point,12);
        var geoc = new BMap.Geocoder();   
        var geolocation = new BMap.Geolocation();
        
         function attribute(mk){
           if(Arrayp.includes(mk)){
            Array.prototype.indexOf = function(val) {
                
            for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
            }
            return -1;
            };
            Array.prototype.remove = function(val) {
            
            var index = this.indexOf(val);
            if (index > -1) {
            this.splice(index, 1);
            }
            };
            Arrayp.remove(mk.point);
            Arrayp.remove(mk);
        }
            // else {
            //     Array.prototype.indexOf = function(val) {
                
            //     for (var i = 0; i < this.length; i++) {
            //     if (this[i] == val) return i;
            //     }
            //     return -1;
            //     };
            //     Array.prototype.remove = function(val) {
                
            //     var index = this.indexOf(val);
            //     if (index > -1) {
            //     this.splice(index, 1);
            //     }
            //     };
            //     Arrayp.remove(mk);
             
            // }
            var p = mk.getPosition();  //返回信息窗口的位置
            Arrayp.push(mk); 
            alert("marker的位置是" + p.lng + "," + p.lat);  
     }
    	geolocation.getCurrentPosition(function(r){
    		if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                mk.enableDragging();//可移动标记
                mk.disableMassClear();//不允许map.clearOverlays方法中被清除
    			map.addOverlay(mk);
    			map.panTo(r.point);
                //alert('您的位置:'+r.point.lng+','+r.point.lat);
                var pt = r.point
                Arrayp.push(mk);  //将元素添加到数组Arrayp中
                geoc.getLocation(pt, function(rs){
    			var addComp = rs.addressComponents;
    			alert('您的位置:'+ addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    
                mk.addEventListener("dragend",function(){
                    map.clearOverlays(); // 清除标注信息
                    attribute(mk);
                    //map.removeOverlay(polyline1[0]);
                });//拖拽结束时触发此事件  
                mk.addEventListener("dblclick",function(){
                getAttr(mk);
            });        
            }); 
    		}
    		else {
    			alert('failed'+this.getStatus());
    		}        
    	},{enableHighAccuracy: true})
    
    //-------------------------------------------------------------------------------------------------------------------
    function G(id) {
    		return document.getElementById(id);
    	}
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
    		{"input" : "suggestId"
    		,"location" : map
    	});
        ac.addEventListener("onhighlight", bfunction);
        function bfunction(e) {  //鼠标放在下拉列表上的事件
    	var str = "";
    		var _value = e.fromitem.value;
    		var value = "";
    		if (e.fromitem.index > -1) {
    			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    		}    
    		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
    		
    		value = "";
    		if (e.toitem.index > -1) {
    			_value = e.toitem.value;
    			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    		}    
    		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
          
    	};
    
    	var myValue;
        ac.addEventListener("onconfirm", cfunction);
        function cfunction(e) {    //鼠标点击下拉列表后的事件
    	var _value = e.item.value;
    		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
    		setPlace();
    	};
      
    	function setPlace(){
    		//map.clearOverlays();    //清除地图上所有覆盖物
    		function myFun(){
    			var ppq = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(ppq, 18);
                var mk = new BMap.Marker(ppq);
    			map.addOverlay(mk);    //添加标注
                Arrayp.push(mk);   //将元素添加到数组Arrayp中
                mk.enableDragging();//可移动标记 
                mk.disableMassClear();//不允许map.clearOverlays方法中被清除
                 mk.addEventListener("dragend",function(){
                    map.clearOverlays(); // 清除标注信息
                    attribute(mk);
                });//拖拽结束时触发此事件
                mk.addEventListener("dblclick",function(){
                getAttr(mk);
            });
            }
            
    		var local = new BMap.LocalSearch(map, { //智能搜索
    		  onSearchComplete: myFun
    		});
            local.search(myValue);
          
    	}
        /
        var Arrayp=[];
        var polyline1 =[];
        var i =0;
        
        function showInfo(e){
              var ln=e.point.lng;
              var la=e.point.lat;
            var point = new BMap.Point(ln, la);
    
           
            map.centerAndZoom(point, 15);
            var mk = new BMap.Marker(new BMap.Point(ln, la)); // 创建点  
            map.addOverlay(mk); //全景场景内添加覆盖物 ,增加点
            mk.setLabel(new BMap.Label("Number:"+(i+1),{offset:new BMap.Size(20,-10)}));
            Arrayp.push(mk);   //将元素添加到数组Arrayp中
            mk.enableDragging();//可移动标记
            mk.disableMassClear();//不允许map.clearOverlays方法中被清除
            i++;
            mk.addEventListener("dragend",function(){
                
                attribute(mk)
                
                var mk=new BMap.Marker (p);  
                });//拖拽结束时触发此事件
                
            mk.addEventListener("dblclick",function(){
                getAttr(mk);
            });
        }
    	 function getAttr(mk){
           
            Array.prototype.indexOf = function(val) {
            for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
            }
            return -1;
            };
            Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
            this.splice(index, 1);
            }
            };
            Arrayp.remove(mk);
            map.clearOverlays(); // 清除标注信息
           
            map.removeOverlay(mk);
        
        
    
    	};        
    
        function PlaceSign()
        { 
            map.removeEventListener("click", showInfo);
            map.addEventListener("click", showInfo);
    }
        function CancelSign(){
           map.removeEventListener("click", showInfo);
         
    
                            }
    
        function  DeleteSign(){
    
        for(i=0;i<Arrayp.length;i++)
        {
            Arrayp[i].enableMassClear();
        }
        map.clearOverlays(); // 清除标注信息
        Arrayp=[];//清空数组
    
        }
    
    
    function showPoly(Arrayp){
    
    //循环显示点对象
    // for(c=0;c<pointList.length;c++){
    // var marker = new BMap.Marker(pointList[c]);
    // map.addOverlay(marker);
    // //将途经点按顺序添加到地图上
    // var label = new BMap.Label(c+1,{offset:new BMap.Size(20,-10)});
    // marker.setLabel(label);
    // }
    
    var  group = Math.floor( Arrayp.length /11 ) ;
    var mode = Arrayp.length %11 ;
    
    var driving = new BMap.DrivingRoute( map, {onSearchComplete: function(results){
        map.clearOverlays(); 
          if (driving.getStatus() == BMAP_STATUS_SUCCESS){
                 var plan = driving.getResults().getPlan(0);
                 var  num = plan.getNumRoutes();
                 alert("plan.num :"+num);
                 for(var j =0;j<num ;j++){
                  var pts= plan.getRoute(j).getPath();    //通过驾车实例,获得一系列点的数组
                  
                  var polyline = new BMap.Polyline(pts, {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5});  
                 // polyline1.push(polyline);
                  map.addOverlay(polyline); 
                 }
          }
    }});
    for(var i =0;i<group;i++){
       var waypoints = Arrayp.slice(i*11+1,(i+1)*11);
       //终点如果是11的倍数,数组取不到最后一位
       driving.search(Arrayp[i*11], Arrayp[(i+1)*11-1],{waypoints:waypoints});//waypoints表示途经点
    }   
    if( mode != 0){
     var waypoints = Arrayp.slice(group*11,Arrayp.length-1);//多出的一段单独进行search
     driving.search(Arrayp[group*11],Arrayp[Arrayp.length-1],{waypoints:waypoints});
    }
    
    }
    
    function route(){
        map.removeEventListener("click", showInfo);
        
    var allOverlay = map.getOverlays();
    	
        
            showPoly(Arrayp);
    
    }
    
    </script>
    
    
    更多相关内容
  • 前言 一、开通腾讯位置服务 在微信公众平台开通腾讯位置服务 二、用开发者权限登录腾讯位置服务 ...-- 地图 --> <map class='map' enable-3D="true" longitude='{{startLongitude}}' latitude='

    一、开通腾讯位置服务

    在微信公众平台开通腾讯位置服务

    在这里插入图片描述

    二、用开发者权限登录腾讯位置服务

    在我的应用中找到在你用的小程序下的key
    在这里插入图片描述

    三、配置合法域名

    在开发管理中配置腾讯位置信息的合理域名
    在这里插入图片描述

    四、代码详解

    1.wxml 文件

    <view class="container">
      <!-- 地图 -->
      <map class='map' enable-3D="true" longitude='{{startLongitude}}' latitude='{{startLatitude}}' scale='14' 
        show-compass="true" 
        enable-traffic="true" 
        show-location="true" 
        polyline="{{polyline}}"
        markers="{{covers}}"></map>
      <view style="position: absolute;width: 100%;top: 68%;left: 20rpx; color:pink;">距离:{{distance}}</view>
      <view class="sos-status">
          <button style="background-color:red;color:#ffffff"  bindtap="drawStart">标记起点</button>
          <button style="background-color:blue;color:#ffffff"  bindtap="drawEnd">标记终点</button>
          <button style="background-color:yellow;color:#ffffff"  bindtap="drawRoad">轨迹划线</button>
      </view>
    </view>
    
    属性说明
    enable-3D展示3D楼块
    longitude中心经度
    show-compass显示指南针
    enable-traffic是否开启实时路况
    show-location显示带有方向的当前定位点
    markers标记点
    polyline路线

    更多属性详见:小程序开发文档-map组件

    1.wxss 文件

    .container {
      position: relative;
      height: 100%;
      width: 100%;
    }
    .sos-status {
      /* display: none; */
      position: absolute;
      height: 300rpx;
      width: 96%;
      overflow: hidden;
      /* position: fixed; */
      bottom: 1%;
      left: 2%;
      z-index: 10;
      border-radius: 20rpx;
      background: #ffffff;
      padding-top: 20rpx;
      box-shadow: 3rpx -3rpx 20rpx #c7c7c7;
      font-family: SourceHanSansSC-bold;
    }
    .map {
      height: 100vh;
      width: 100%;
    }
    

    3.js 文件

    1. 初始化
      //全局定义
      var marsks=[]
      data: {
        covers:[],
        polyline:[],
        startLatitude:0,
        endLatitude:0,
        startLongitude:0,
        endLongitude:0,
        amLatitude:0,
        amLongitude:0,
        distance:0,
        icon:[
          '/images/end.png',
          '/images/ambulance.png'
        ]
      },
    
    1. 获取当前位置为标记起点
    onLoad: function (options) {
        this.getLocation()
        this.getAmbulanceLocation()
    },
    getLocation(){
        var self = this
        // 获取当前的地理位置
        wx.getLocation({
          type: 'gcj02', 
          success: (res) => {
            console.log(res)
            //赋值经纬度
            var currentLatitude = res.latitude; //纬度
            var currentLongitude =res.longitude; //经度
            self.setData({
              startLatitude: currentLatitude,
              startLongitude:currentLongitude,
            });
          }
        });
    },
    
    1. 根据当前位置获取距离最近的医院位置
    //根据当前位置获取距离最近的医院位置
    getHospitalPromoteUrl(latitude,longitude){
        var self=this
        wx.request({
          url: 'https://xxxxxxxxx/consumer/depts/hospitals',//测试地址,并非真是地址
          method: "GET",
          data: {
            latitude: latitude,
            longitude:longitude,
          },
          header: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          success: (res) => {
            console.log(res)
            if(res.data.success==false || res.data.data.length==0){
              return
            }
            self.setData({
             endLatitude:res.data.data[0].latitude,
             endLongitude:res.data.data[0].longitude
           })
          }
        })
      },
    
    1. 添加标记点和去重的方法
      pushMarkers(latitude,longitude,id,icon){
        var markers=
          {
            id:id,
            latitude:  latitude,
            longitude: longitude,
            width: "60rpx",
            height: "60rpx",
            iconPath: icon
          }
         marsks.push(markers)
         this.removeRepeat(marsks)
         this.setData({
            covers:marsks
         })
      },
      //去除重复的标记点
      removeRepeat(marsks){
           for(var i=0;i<marsks.length;i++){
             for(var j=i+1;j<marsks.length;j++)
             if(marsks[i].id==marsks[j].id){
                marsks.splice(j,1)
                j--;
             }
           }
           console.log(marsks)
      },
    
    1. 点击标记起点和终点
      //标记起点
      drawStart(){
          this.pushMarkers(this.data.startLatitude,this.data.startLongitude,0,this.data.icon[0])
          this.getHospitalPromoteUrl(this.data.startLatitude,this.data.startLongitude)
      },
      //标记终点
      drawEnd(){
         this.pushMarkers(this.data.endLatitude,this.data.endLongitude,1,this.data.icon[0])
         this.distanceCalculation()
      },
    
    1. 轨迹划线(由于需求原因,我们需要把救护车的位置也显示出来,实时监控救护车的位置,所以在这里用到了waypoints属性)
      在这里插入图片描述
      路线规划的更多属性和方法详见:腾讯位置信息Api-小程序
      //轨迹划线
      drawRoad(){
        let fromLocation=this.data.startLatitude+','+this.data.startLongitude
        let toLocation=this.data.endLatitude+','+this.data.endLongitude
        let waypoints=this.data.amLatitude+','+this.data.amLongitude//途径点
        var self=this
        self.pushMarkers(self.data.amLatitude,self.data.amLongitude,2,self.data.icon[1])
        console.log(fromLocation,toLocation)
        wx.request({
          url: 'https://apis.map.qq.com/ws/direction/v1/driving/',
          data: {
            from: fromLocation,
            to: toLocation,
            waypoints: waypoints,
            key: 'xxxxxxxxxxxxxxxxxxxxxxx'//腾讯位置服务里面给的key值
          },
          method: 'GET',
          success: function(r) {
            console.log('获取到轨迹信息', r.data.result);
            // console.log(wayPoints);
            let coors = r.data.result.routes[0].polyline;
            for (var i = 2; i < coors.length; i++) {
              coors[i] = coors[i - 2] + coors[i] / 1000000;
            }
            var b = [];
            for (var i = 0; i < coors.length; i = i + 2) {
              b[i / 2] = {
                latitude: coors[i],
                longitude: coors[i + 1]
              };
            }
            let passedPoint = [];
            for (i = 0; i < coors.length; i += 2) {
              let lat = coors[i];
              let lng = coors[i + 1];
              passedPoint.push({
                latitude: lat,
                longitude: lng
              });
              if (Math.abs(lat - self.data.covers[2].latitude) < 0.0005 && Math.abs(lng -       self.data.covers[2].longitude) < 0.0005) {
                break;
               }
            }
            self.setData({
              polyline:[
                {
                  points: b,
                  color: '#41965b',
                  width: 6,
                  arrowLine: true
                }, {
                  points: passedPoint,
                  color: '#green',
                  width: 6,
                  arrowLine: true
                }
              ]
            })
          }
        })
      },
    
    1. 距离计算
      distanceCalculation(){
        var self =this
        let fromLocation=this.data.startLatitude+','+this.data.startLongitude
        let toLocation=this.data.endLatitude+','+this.data.endLongitude
        wx.request({
          url: 'https://apis.map.qq.com/ws/distance/v1/matrix',
          data: {
            mode: 'driving',
            from: fromLocation,
            to: toLocation,
            key: 'xxxxxxxxxxxxxxxxxxxxxxx'//腾讯位置服务里面给的key值
          },
          method: 'GET',
          success: function(res) {
            self.setData({
              distance:res.data.result.rows[0].elements[0].distance/1000+'km'
            })   
          }
        })
      },
    
    1. 获取救护车位置
     getAmbulanceLocation(){
        var self =this
        wx.request({
          url: 'xxxxxxxxxxxxx',
          data:{
            taskId:'794387945590784',
            userId:'785091528691713'
          },
          method: 'POST',
    			header: {
    		     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                },
          success: res => {
            console.log(res.data.data)
            if (res.data.success == false) {
              wx.showToast({
                title: '获取救护车位置失败',
                duration: 2000
              });
            } else {
                self.setData({
                  amLatitude:res.data.data.latitude,
                  amLongitude:res.data.data.longitude
                })
    
            }
        }
      })
      },
    

    预览

    在这里插入图片描述

    总结

    有时候我们会憧憬。然后发现有人单身,有人结婚,有人为工作烦恼,有人为学业忙碌,有人…… 属于我们的那个蓝天早已消失不见。看着窗外的天,突然就黑了,感觉像我们的青春,突然就没了。
    But
    I have always been with you。

    展开全文
  • 下面是一个结合bootstrap,jquery的一个小示例,简单的实现了百度地图路线规划。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...

    BootStrap学习

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
    使用时需要从Bootstrap 官网中进行下载,然后复制到相应的文件夹下,并在head中用link进行调用。
    Bootstrap 包的内容基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
    CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
    组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
    JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
    定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

    下面是一个结合bootstrap,jquery的一个小示例,简单的实现了百度地图路线规划。

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title>BootStrap学习</title>
    	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    	<style type="text/css">
    		#myMap{
    			width: 100%;
    			height: 600px;
    		}
    	</style>
    </head>
    <body>
    	<nav class="navbar navbar-default">
    	  <div class="container-fluid">
    	    <!-- Brand and toggle get grouped for better mobile display -->
    	    <div class="navbar-header">
    	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    	        <span class="sr-only">Toggle navigation</span>
    	        <span class="icon-bar"></span>
    	        <span class="icon-bar"></span>
    	        <span class="icon-bar"></span>
    	      </button>
    	      <a class="navbar-brand" href="#">我的地图</a>
    	    </div>
    	
    	    <!-- Collect the nav links, forms, and other content for toggling -->
    	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    	      <ul class="nav navbar-nav">
    	        <!-- <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    	        <li><a href="#">Link</a></li> -->
    <!-- 	        <li class="dropdown">
    	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
    	          <ul class="dropdown-menu">
    	            <li><a href="#">Action</a></li>
    	            <li><a href="#">Another action</a></li>
    	            <li><a href="#">Something else here</a></li>
    	            <li role="separator" class="divider"></li>
    	            <li><a href="#">Separated link</a></li>
    	            <li role="separator" class="divider"></li>
    	            <li><a href="#">One more separated link</a></li>
    	          </ul>
    	        </li>
    	      --></ul>
    	      <form class="navbar-form navbar-left">
    	        <div class="form-group">
    	          <input id="startAddress" type="text" class="form-control" placeholder="起点">
    			  <input id="endAddress" type="text" class="form-control" placeholder="终点">
    	        </div>
    	        <button id="btnBus" type="button" class="btn btn-default">公交</button>
    			<button id="btnDrive" type="button" class="btn btn-danger">驾车</button>
    			<button id="btnRide" type="button" class="btn btn-warning">骑行</button>
    			<button id="btnWalk" type="button" class="btn btn-success">步行</button>
    	      </form>
    	     <ul class="nav navbar-nav navbar-right">
    	        <!-- <li><a href="#">Link</a></li> -->
    	        <!-- <li class="dropdown">
    	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
    	          <ul class="dropdown-menu">
    	            <li><a href="#">Action</a></li>
    	            <li><a href="#">Another action</a></li>
    	            <li><a href="#">Something else here</a></li>
    	            <li role="separator" class="divider"></li>
    	            <li><a href="#">Separated link</a></li>
    	          </ul>
    	        </li>
    	      --></ul>
    	    </div><!-- /.navbar-collapse -->
    	  </div><!-- /.container-fluid -->
    	</nav>
    	<!--以下是地图及结果面板-->
    	<div class="container">
    		<div class="row">
    			<!-- 这里是结果面板部分 -->
    			<div class="col-md-3">
    				<input type="hidden" name="startPointLng" id="startPointLng" value="" />
    				<input type="hidden" name="startPointLat" id="startPointLat" value="" />
    				<input type="hidden" name="endPointLng" id="endPointLng" value="" />
    				<input type="hidden" name="endPointLat" id="endPointLat" value="" />
    				结果面板
    			</div>
    			<div class="col-md-9">
    				<!-- 这里是地图 -->
    				<div id="myMap"></div>
    			</div>
    		</div>
    	</div>
    	<script src="jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xrKze9MZHDxiinDwoCNHhxAeldGfCT2r"></script>
    	
    	<script type="text/javascript">
    		$(function(){
    			//所有的功能代码都是从这里开始
    			var map = new BMap.Map("myMap");
    			map.centerAndZoom("石家庄",12);
    			var ac = new BMap.Autocomplete({
    				"input" : "startAddress",
    				"location" : map
    			});
    			var ac1 = new BMap.Autocomplete({
    				"input" : "endAddress",
    				"location" : map
    			});
    			//添加监听事件
    			ac.addEventListener("onconfirm",function(e){
    				//创建一个监听者,用来监听文本框中是否已经完成了自动填充任务
    				//如果监听到了这个事件,那么就执行下面的代码
    				var startAddress = $('#startAddress').val();
    				var myGeo = new BMap.Geocoder();
    				myGeo.getPoint(
    				startAddress,
    				function(point){
    					$('#startPointLng').val(point.lng);
    					$('#startPointLat').val(point.lat);	
    					map.addOverlay(new BMap.Marker(point));
    					map.centerAndZoom(point,15);
    				},
    				map
    				);
    			});
    			ac1.addEventListener("onconfirm",function(e){
    				//创建一个监听者,用来监听文本框中是否已经完成了自动填充任务
    				//如果监听到了这个时间,那么就执行下面的代码
    				var endAddress = $('#endAddress').val();
    				var myGeo = new BMap.Geocoder();
    				myGeo.getPoint(
    				endAddress,
    				function(point){
    					$('#endPointLng').val(point.lng);
    					$('#endPointLat').val(point.lat);
    					map.addOverlay(new BMap.Marker(point));
    					map.centerAndZoom(point,15);
    				},
    				map
    				);
    			});
    			//公交导航
    			$('#btnBus').click(function(){
    				map.clearOverlays();//清除地图上所有覆盖物
    				var transit = new BMap.TransitRoute(map, { 
    				    renderOptions: { //搜索结果的呈现设置
    				        map: map, 
    						//展现结果的地图实例。当指定此参数后,搜索结果的标注、线路等均会自动添加到此地图上
    				        autoViewport: true   //检索结束后是否自动调整地图视野
    				    }  
    				});
    				var starLng = eval($('#startPointLng').val());//eval转换数值类型
    				var starLat = eval($('#startPointLat').val());
    				var endLng = eval($('#endPointLng').val());
    				var endLat = eval($('#endPointLat').val());
    				var start = new BMap.Point(starLng, starLat);
    				var end = new BMap.Point(endLng, endLat);
    				transit.search(start, end);
    			});
    			//驾车导航
    			$('#btnDrive').click(function(){
    				map.clearOverlays();
    				var driving = new BMap.DrivingRoute(map, { 
    				    renderOptions: { 
    				        map: map, 
    				        autoViewport: true 
    				    }
    				});				
    				var starLng = eval($('#startPointLng').val());//eval转换数值类型
    				var starLat = eval($('#startPointLat').val());
    				var endLng = eval($('#endPointLng').val());
    				var endLat = eval($('#endPointLat').val());
    				var start = new BMap.Point(starLng, starLat);
    				var end = new BMap.Point(endLng, endLat);
    				driving.search(start, end);
    			});
    			//骑行导航
    			$('#btnRide').click(function(){
    				map.clearOverlays();
    				var riding = new BMap.RidingRoute(map, { 
    				    renderOptions: { 
    				        map: map, 
    				        autoViewport: true 
    				    }
    				});			
    				var starLng = eval($('#startPointLng').val());//eval转换数值类型
    				var starLat = eval($('#startPointLat').val());
    				var endLng = eval($('#endPointLng').val());
    				var endLat = eval($('#endPointLat').val());
    				var start = new BMap.Point(starLng, starLat);
    				var end = new BMap.Point(endLng, endLat);
    				riding.search(start, end);
    			});
    			//步行导航
    			$('#btnWalk').click(function(){
    				map.clearOverlays();
    				var walking = new BMap.WalkingRoute(map, { 
    				    renderOptions: { 
    				        map: map, 
    				        autoViewport: true 
    				    }
    				});		
    				var starLng = eval($('#startPointLng').val());//eval转换数值类型
    				var starLat = eval($('#startPointLat').val());
    				var endLng = eval($('#endPointLng').val());
    				var endLat = eval($('#endPointLat').val());
    				var start = new BMap.Point(starLng, starLat);
    				var end = new BMap.Point(endLng, endLat);
    				walking.search(start, end);
    			});
    			
    			/* var geolocation = new BMap.Geolocation();
    			geolocation.getCurrentPosition(function(r){
    					if(this.getStatus() == BMAP_STATUS_SUCCESS){
    						var point = new BMap.Point(r.point.lng,r.point.lat);
    						map.centerAndZoom(point,12);
    						var ac = new BMap.Autocomplete({
    							"input" : "keyIdEnd",
    							"location" : map,
    						});
    					}
    					else {
    						alert('failed'+this.getStatus());
    					}        
    				},{enableHighAccuracy: true})
    				//enableHighAccuracy高分辨率 */
    			
    			//所有的功能代码都是从这里结束
    		});
    	</script>
    </body>
    </html>
    
    展开全文
  • 高德地图 自定义图标加路线规划

    千次阅读 2019-11-07 11:56:03
    // 根据起终点经纬度规划驾车导航路线 driving . search ( new AMap . LngLat ( 116.421002 , 39.93123 ) , new AMap . LngLat ( 116.402123 , 39.91122 ) , function ( status , result ) { if...
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <title>图标点标记</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,body,#container{
                height:100%;
                width:100%;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key&plugin=AMap.Driving"></script>
    
        <script>
        var map = new AMap.Map('container', {
            zoom: 12,
            center: [116.4,39.92],
            resizeEnable: true
        });
    
        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(25, 25),
            // 图标的取图地址
            image: 'tu.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(25, 25),
        });
        /*
        * 驾车策略 
        * AMap.DrivingPolicy.LEAST_TIME           最快捷模式
        * AMap.DrivingPolicy.LEAST_FEE            最经济模式
        * AMap.DrivingPolicy.LEAST_DISTANCE       最短距离模式
        * AMap.DrivingPolicy.REAL_TRAFFIC         考虑实时路况
        */
        var drivingOption = {
            policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
            ferry: 1, // 是否可以使用轮渡
            map: map,
            hideMarkers: false, // 设置隐藏路径规划的起始点图标
            autoFitView: true
        }
    
        // 构造路线导航类
        var driving = new AMap.Driving(drivingOption)
        // 根据起终点经纬度规划驾车导航路线
        driving.search(new AMap.LngLat(116.421002, 39.93123), new AMap.LngLat(116.402123, 39.91122), function(status, result) {
          if (status === 'complete') {
            console.log('绘制驾车路线完成')
          } else {
            console.log('获取驾车数据失败:' + result)
          }
        });
    
        var capitals = [{
            center: [116.42,39.93123],
        }, {
            center: [116.41,39.92132],
        }, {
            center: [116.40,39.91122],
        }];
    
        var facilities = [];
        for (var i = 0; i < capitals.length; i++) {
            var marker = new AMap.Marker({
                position: new AMap.LngLat(capitals[i].center[0], capitals[i].center[1]),
                offset: new AMap.Pixel(-10, -10),
                icon: startIcon,
            });
            facilities.push(marker);
        }
        map.add(facilities);
        </script>
    </body>
    </html>
    

    效果图:
    在这里插入图片描述

    以防自己以后能用到 先写出来。

    展开全文
  • 百度地图显示,标记折线绘制总结: 当中可能存在有一个小BUG,自己的位置标记图标在第一次调试的手机上可以运行,换一个手机则好像不行,怀疑是assent的原因,但确实也是这样建的文件夹,运行编译器也没有报错,小...
  • 基于高德地图路线规划以及附近车辆的点。 效果图: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta ...
  • 微信小程序之腾讯地图二(导航) 话不多说,直接上图!!! 一、dom <template> <view> <map id="tencentMap" :style="[...mapStyle]" :show-compass="showCompass" :enable-...
  • 两个点之间的路线是使用“Marker”点连接起来的,目前还没找到改变点颜色的方法,测试过使用setStyle没有效果。 <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8...
  • // 第一个参数表示路径规划的起点和终点,第二个参数表示驾车模式,第三个参数表示途经点,第四个参数表示避让区域,第五个参数表示避让道路 // RouteSearch.DriveRouteQuery query = new RouteSearch....
  • 1、先绘制一张中国大地图:可展示中国大致的疫情情况 2、大地图可跳转至各个省份 3、当大地图跳转至重庆,进入百度地图 4、对【小镭】经过的点进行标记 点击省份【四川】,可进入四川省份地图,双击退回...
  • 通过api获取到百度地图经纬度,再转换为腾讯地图经纬,用于夸地图规划路线,获取起点到终点距离等。。。
  • 一、显示地图配置 申请百度地图 AK http://lbsyun.baidu.com/apiconsole/key 有了ak自己上代码 注意代码中一定要把自己的ak填入 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding...
  • 百度地图绘制途径点 百度地图Api地址: ...公司项目中要求绘制物流信息,需体现...其中middlePoints为标点的数组 //途经点方式化路线: driving.search(startPoint, endPoint, { waypoints: middlePoints }) 但是这个方法
  • 最近朋友需要两点路线和多个点路线绘制这个功能,帮忙弄了一下,写这篇博客与大家分享一下。两点路线是起点和终点两个经纬度点,高德绘制出路线,可以实现实线和虚线功能效果图:相关属性:mPolylineOptions = new ...
  • 1.产品概述产品解读高德地图与百度地图均属地图导航类APP,两家slogan如下: 高德:精准地图,旅游出行必备百度:路线规划,出行必备 地图导航类APP的核心价值即为用户提供位置及路线服务。笔者认为,位置及路线服务...
  • 1 在main.js里面应用要使用的组件等 当然呢 要先安装整个vue-amap 2 在使用页面中使用 ... //路径规划的一些详细路线显示 <div id="panel" style=" position: fixed; z-index: 150; bott
  • 便利贴--7{OpenLayers,vue项目1,添加地图的路径和标点数据}
  • Vue使用腾讯地图

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 199
精华内容 79
关键字:

地图标点路线规划