百度地图自定义语音导航教程

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了百度地图自定义语音导航教程相关的知识,希望对你有一定的参考价值。

参考技术A 百度 地图 如何自定义语音 导航 ?百度地图是一款国内很好用的地图导航软件,我来和大家分享百度地图自定义语音导航的教程,快来看看吧!

1、首先需要用户更新最新版的百度地图;

2、进入软件后,点击搜索栏左边的头像,进入个人信息界面;

3、进入后在界面下方可以看到语音定制,点击进入;

4、进入后,用户可以选择人气语音包,也可以点击下面的录制我的语音,制作专属于自己的语音包;

5、进入录制后选择自己的性别,就可以进行录制了;

6、录制成功后,可以在我的语音包列表中看到,点击使用即可。

自定义百度地图导航控件

百度地图js版 的导航控件按钮,在webapp有几点问题

1 不好点击,也就是点不中

2 不能置灰,也就是说当缩小到最小的时候,按钮应该为灰色,反之放大到最大也该为灰色

基于以上2点,自定一下,其实很简单,目的在于可以自己来控制

代码如下

  1 /**
  2      *@ NavControl
  3      */
  4     var NavControl =
  5         /**
  6          * NavControl
  7          * @class 
  8          * @constructor
  9          * @param {Map} map 地图的一个实例。
 10          * @remark 
 11          *    
 12          */
 13         BMapLib.NavControl = function (options) {
 14             this.defaultAnchor = options.anchor;
 15             this.defaultOffset = options.offset || new BMap.Size(10, 10);
 16             this.zoom_btn=null;
 17             this.zoomout_btn=null;
 18         };
 19 
 20 
 21         NavControl.prototype = new BMap.Control();
 22 
 23         NavControl.prototype.initialize = function(map) {
 24             this.map = map;
 25             var that = this;
 26             map.addEventListener(zoomend, function () {
 27                 if(that.map.getZoom()>=18){
 28                     that.removeClass(that.zoom_btn,blue_off);
 29                     that.removeClass(that.zoom_btn,blue_disable);
 30                     that.addClass(that.zoom_btn,blue_disable);
 31                 }else if(that.map.getZoom()<=3){
 32                     that.removeClass(that.zoomout_btn,blue_off);
 33                     that.removeClass(that.zoomout_btn,blue_disable);
 34                     that.addClass(that.zoomout_btn,blue_disable);
 35                 }else{
 36                     that.removeClass(that.zoomout_btn,blue_disable);
 37                     that.removeClass(that.zoom_btn,blue_disable);
 38                     that.addClass(that.zoom_btn,blue_off);
 39                     that.addClass(that.zoomout_btn,blue_off);
 40                 }
 41             });
 42 
 43 
 44             var container = document.createElement(div);
 45             container.id=zoom-btn-container;
 46 
 47             var zoom_btn=this.zoom_btn = document.createElement(div);
 48             zoom_btn.className+=zoom_btn  zoom_btn_in;
 49             zoom_btn.style.cssText += this.buildZoomBtnIn();
 50             zoom_btn.addEventListener(click,function(){
 51                 if(that.map.getZoom()<=18){
 52                     that.map.zoomIn();
 53                 }
 54             });
 55             container.appendChild(zoom_btn);
 56 
 57             var zin = document.createElement(div);
 58             zin.className+=zin icon -plus;
 59             zoom_btn.appendChild(zin);
 60 
 61             var zoomout_btn =this.zoomout_btn= document.createElement(div);
 62             zoomout_btn.className+=zoom_btn blue_off zoom_btn_out;
 63             zoomout_btn.addEventListener(click,function(){
 64                 if(that.map.getZoom()>3){
 65                     that.map.zoomOut();
 66                 }
 67             });
 68             container.appendChild(zoomout_btn);
 69 
 70             var zout = document.createElement(div);
 71             zout.className+=zout icon -minus;
 72             zoomout_btn.appendChild(zout);
 73 
 74             
 75 
 76             var div=document.createElement(div); 
 77             div.appendChild(container);
 78             this.map.getContainer().appendChild(div);
 79             return div;
 80         };
 81 
 82 
 83 
 84 
 85 
 86         NavControl.prototype.buildZoomBtnIn=function(){
 87             var csstext = [];
 88             csstext.push(font-size: 11px);
 89             csstext.push(line-height: 18px);
 90             return csstext.join(;);
 91         };
 92 
 93         NavControl.prototype.buildZoomBtnOut=function(){
 94             var csstext = [];
 95             csstext.push(font-size: 11px);
 96             csstext.push(line-height: 18px);
 97             return csstext.join(;);
 98         };
 99 
100         NavControl.prototype.hasClass = function (obj, cls) {
101             return obj.className.match(new RegExp((\\s|^) + cls + (\\s|$)));
102         };
103 
104         NavControl.prototype.addClass = function (obj, cls) {
105             if (!this.hasClass(obj, cls)) obj.className += " " + cls;
106         };
107 
108         NavControl.prototype.removeClass = function (obj, cls) {
109             if (this.hasClass(obj, cls)) {
110                 var reg = new RegExp((\\s|^) + cls + (\\s|$));
111                 obj.className = obj.className.replace(reg,  );
112             }
113         };

其中css代码如下

 1 @charset "UTF-8";@font-face {
 2     font-family: mwa;
 3     src: url(http://map.baidu.com/mobile/simple/static/styleguide/icons/mwa_8077edf.eot);
 4     src: url(http://map.baidu.com/mobile/simple/static/styleguide/icons/mwa_f9e0ebd.woff) format("woff"),url(http://map.baidu.com/mobile/simple/static/styleguide/icons/mwa_77e7dd3.ttf) format("truetype")
 5 }
 6 
 7 #zoom-btn-container {
 8     -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
 9     background: rgba(255,255,255,.8);
10     border-radius: 3px;
11     background-image: url(http://api0.map.bdimg.com/images/geolocation-control/mobile/gradient-bg-1x64.png)
12 }
13 
14 .bl_btn {
15     background: url(http://s1.map.bdimg.com/mobile/simple/static/common/widget/apiext/images/result_bgs_b6bbaa6.png) 0 0 no-repeat;
16     -webkit-background-size: 58px 160px
17 }
18 
19 .zoom_btn {
20     display: -webkit-box;
21     -webkit-box-align: center;
22     -webkit-box-pack: center;
23     -webkit-box-sizing: border-box
24 }
25 
26 .zoom_btn {
27     height: 40px;
28     width: 48px;// 宽带加大在于容易触控到
29 }
30 
31 .zoom_btn_in {
32     margin-bottom: 5px;
33     border-bottom: 1px solid #ececec
34 }
35 
36 .zoom_btn_on {
37     background-color: #eee
38 }
39 
40 .zin,.zout {
41     width: 16px;
42     height: 16px;
43     font-size: 16px;
44     color: #686A5B
45 }
46 
47 .blue_off.zin{
48   opacity: .8
49 }
50 .blue_off.zout{
51   opacity: .8
52 }
53 .blue_disable  {
54     opacity: .33
55 }
56 
57 .blue_disable {
58     opacity: .33
59 }
60 
61 .icon.-plus:before {
62     content: "\e60d";
63 }
64 
65 .icon.-minus:after {
66     content: "\e60f";
67 }
68 
69 .icon {
70     display: inline-block;
71     font-family: mwa;
72     font-weight: 400;
73     font-style: normal;
74     font-variant: normal;
75     line-height: 1;
76     text-transform: none;
77     -webkit-font-smoothing: antialiased;
78     font-size: 16px;
79     width: 1em;
80     height: 1em;
81 }

注意这里面的 “+”  “-”号使用了自定义的图标字体

 

 

使用

 this.NavControl = new BMapLib.NavControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
 that.Map.addControl(this.NavControl);

 

以上是关于百度地图自定义语音导航教程的主要内容,如果未能解决你的问题,请参考以下文章

ios百度导航3.2 结合百度地图3.3.2使用 无法调起导航 以及语音授权失败解决方法!!!

Android studio 百度地图开发(10)语音播报的问题:能正常导航,但是无法语音播报

自定义百度地图导航控件

百度地图个性编辑器怎么导出地图

百度地图可以虚拟定位吗

[地图Map] 百度地图api 自定义路线的道路匹配问题