百度地图自定义语音导航教程
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使用 无法调起导航 以及语音授权失败解决方法!!!