如何将百度地图引入到HTML和VUE文件中?
来源:互联网 发布:etm软件会员 编辑:程序博客网 时间:2024/05/18 12:38
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富,交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,并支持HTML5特性的地图开发。
该套API免费对外开放。自V1.5版本起,您需先申请密钥(AK)才可使用,接口无使用次数限制。因此,本人这里将介绍V1.5版本以下,不需要密钥即可使用,推荐使用版本1.4后者版本1.1。
首先如果我们用的是HTML文件,只需大致按照下面来写
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JSAPI与URLAPI结合示例</title> <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4&ak=2b866a6daac9014292432d81fe9b47e3"></script>--> <script src="http://d1.lashouimg.com/static/js/release/jquery-1.4.2.min.js" type="text/javascript"></script> <style type="text/css"> html,body{ width:400px; height:300px; margin:0; overflow:hidden; } </style></head><body><div style="width:400px;height:300px;border:1px solid gray" id="container"</div></body></html><script type="text/javascript"> var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(111.65,40.824887), 13); map.enableScrollWheelZoom(); var marker=new BMap.Marker(new BMap.Point(111.653884,40.824887)); map.addOverlay(marker); var licontent="<b>天安门</b><br>"; licontent+="<span><strong>地址:</strong>北京市东城区天安门广场北侧</span><br>"; licontent+="<span><strong>电话:</strong>(010)63095718,(010)63095630</span><br>"; licontent+="<span class=\"input\"><strong></strong><input class=\"outset\" type=\"text\" name=\"origin\" value=\"北京站\"/><input class=\"outset-but\" type=\"button\" value=\"公交\" onclick=\"gotobaidu(1)\" /><input class=\"outset-but\" type=\"button\" value=\"驾车\" onclick=\"gotobaidu(2)\"/><a class=\"gotob\" href=\"url=\"http://api.map.baidu.com/direction?destination=latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:天安门"+"®ion=北京"+"&output=html\" target=\"_blank\"></a></span>"; var hiddeninput="<input type=\"hidden\" value=\""+'北京'+"\" name=\"region\" /><input type=\"hidden\" value=\"html\" name=\"output\" /><input type=\"hidden\" value=\"driving\" name=\"mode\" /><input type=\"hidden\" value=\"latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:天安门"+"\" name=\"destination\" />"; var content1 ="<form id=\"gotobaiduform\" action=\"http://api.map.baidu.com/direction\" target=\"_blank\" method=\"get\">" + licontent +hiddeninput+"</form>"; var opts1 = { width: 300 }; var infoWindow = new BMap.InfoWindow(content1, opts1); marker.openInfoWindow(infoWindow); marker.addEventListener('click',function(){ marker.openInfoWindow(infoWindow); }); function gotobaidu(type) { if($.trim($("input[name=origin]").val())=="") { alert("请输入起点!"); return; }else{ if(type==1) { $("input[name=mode]").val("transit"); $("#gotobaiduform")[0].submit(); }else if(type==2) { $("input[name=mode]").val("driving"); $("#gotobaiduform")[0].submit(); } } }</script>
代码上面测亲有效值
如果我们想在VUE项目中引用,首先需要将
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
上面代码引入到index.html的中文件
然后,我们就可以在我们想要的某个VUE文件中引入下面代码
<template> <!--地图容器--> <div id="XSDFXPage" class="XSDFXPage"></div></template><script> export default { name:'', data () { return { } }, mounted() { // 百度地图API功能 // 创建Map实例 var map = new BMap.Map("XSDFXPage",{enableMapClick:true}); // 初始化地图,设置中心点坐标和地图级别 map.centerAndZoom(new BMap.Point(116.4035,39.915), 11); // 添加地图类型控件 map.addControl(new BMap.MapTypeControl()); // 设置地图显示的城市 此项是必须设置的 map.setCurrentCity("杭州"); // 开启鼠标滚轮缩放 map.enableScrollWheelZoom(true); // 设置定时器,对地图进行自动移动 setTimeout(function(){ map.panTo(new BMap.Point(113.262232,23.154345)); }, 2000); setTimeout(function(){ map.setZoom(14); },4000); /************************************************ 添加折线 *************************************************/ var pointGZ = new BMap.Point(113.262232,23.154345); var pointHK = new BMap.Point(110.35,20.02); setTimeout(function(){ var polyline = new BMap.Polyline([pointGZ,pointHK],{strokeColor:"blue",strokeWeight:5,strokeOpacity:0.5}); map.addOverlay(polyline); },6000); /************************************************ 添加工具条、比例尺控件 *************************************************/ map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL})); /************************************************ 添加自定义控件类,放大ZoomControl *************************************************/ function ZoomControl() { //默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT; this.defaultOffset = new BMap.Size(50,23); } //通过JavaScript的prototype属性继承于BMap.Control ZoomControl.prototype = new BMap.Control(); //自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回 //在本方法中创建div容器,并将其添加到地图容器中 ZoomControl.prototype.initialize = function(map) { //创建一个DOM元素 var div = document.createElement('div'); //添加文字说明 div.appendChild(document.createTextNode('放大两级')); //添加样式 div.style.color = '#40C5CC'; div.style.cursor = 'pointer'; div.style.border = '3px solid gray'; div.style.backgroundColor = '#eee'; //绑定事件,点击触发 div.onclick = function(e) { map.setZoom(map.getZoom() + 2); } //添加DOM元素到地图上 map.getContainer().appendChild(div); //将DOM元素返回 return div; } //创建控件 var myZoomCtrl = new ZoomControl(); map.addControl(myZoomCtrl) /************************************************ 添加添加城市列表控件 *************************************************/ map.addControl(new BMap.CityListControl({ anchor:BMAP_ANCHOR_BOTTOM_RIGHT, offset:new BMap.Size(130,23) // 切换城市之间事件 // onChangeBefore: function(){ // alert('before'); // }, // 切换城市之后事件 // onChangeAfter:function(){ // alert('after'); // } })); /************************************************ 添加新图标 *************************************************/ //定义新图标 var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif",new BMap.Size(300,157)); //创建标注 var marker = new BMap.Marker(pointHK,{icon:myIcon}); var marker1 = new BMap.Marker(pointGZ,{icon:myIcon}); //将标注放大地图上 map.addOverlay(marker); map.addOverlay(marker1); //文字提示 var label = new BMap.Label('广州西站',{offset:new BMap.Size(140,10)}); marker1.setLabel(label); //添加新图标的监听事件 marker1.addEventListener('click',function(){ var p = marker1.getPosition();//获取位置 alert("点击的位置是:" + p.lng + ',' + p.lat); }) /************************************************ 添加曲线 *************************************************/ var beijingPosition=new BMap.Point(116.432045,39.910683), hangzhouPosition=new BMap.Point(120.129721,30.314429), taiwanPosition=new BMap.Point(121.491121,25.127053); var point = [beijingPosition,hangzhouPosition,taiwanPosition]; var curve = new BMapLib.CurveLine(point, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});//创建弧线 map.addOverlay(curve);//添加到地图上 curve.enableEditing();//开启编辑功能 /************************************************ 给地图添加右键菜单 *************************************************/ var menu = new BMap.ContextMenu(); var txtMenuItem = [ { text:'放大', callback:function(){map.zoomIn()} }, { text:'缩小', callback:function(){map.zoomOut()} } ]; for(var i=0; i < txtMenuItem.length; i++){ menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100)); } map.addContextMenu(menu); } }</script><style scoped> html,body,.XSDFXPage{ width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微软雅黑"; }</style>
上面代码已经详细介绍了每一步的意思,我们只需按需引入即可,不需要全部引入,
最后,我们写完代码后,可能会出现BMap is not defined的问题
entry: {
app: ‘./src/main.js’
}, 的下面加上
externals:{
‘BMap’: ‘BMap’
},
如下所示
module.exports = { entry: { app: './src/main.js' }, externals:{ 'BMap': 'BMap' }, output: {
然后再找到我们要引入地图的vue文件中引入BMap,例如
<script> import BMap from 'BMap' import {map} from '../../../api/config' export default{
这时就已经大功告成了。最后需要注意的是,在目标vue文件中,要给其设宽度,不然可显示不出来哦。
阅读全文
0 0
- 如何将百度地图引入到HTML和VUE文件中?
- 百度地图引入到html/jsp文件中的地址
- vue-cli 引入百度地图
- Android studio中如何引入百度地图
- 如何引入百度地图
- vue如何引入echarts地图
- Vue中如何引入远程JS文件?
- 【求助】如何从外部将一个html引入到另一个html中!
- 将百度地图添加到页面中
- 百度地图如何引入mapapi.bundle资源文件
- 如何在JSP中引入百度地图代码?
- 网页中引入百度地图
- Android中引入百度地图
- vue中使用百度地图
- Vue系列:如何将百度地图包装成Vue的组件
- Vue系列:如何将百度地图包装成Vue的组件
- 如何在一个html文件中引入另一个html文件
- vue中如何将html字符串转化为html
- iText解析pdf调研
- QLayout的使用小结
- Spring——控制反转、反射与依赖注入
- 关于静态变量的初始化时机
- JavaScript入门篇--你也有控制权(DOM操作)
- 如何将百度地图引入到HTML和VUE文件中?
- 【分治计数】BZOJ3745 [Coci2015]Norma
- 2017年9月16日提高组T2 B 三维导弹拦截
- 阿里云远程链接mysql等端口的配置问题
- python——进程线程、与协程基础概述
- 集合-fail-fast机制
- Python·Jupyter Notebook的各种快捷键
- 用FPGA实现H.264/AVC硬件编解码器的构想
- pojThe merchant