如何将百度地图引入到HTML和VUE文件中？
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富，交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，并支持HTML5特性的地图开发。该套API免费对外开放。自V1.5版本起，您需先申请密钥（AK）才可使用，接口无使用次数限制。因此，本人这里将介绍V1.5版本以下，不需要密钥即可使用，推荐使用版本1.4后者版本1.1。
·
百度地图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文件中，要给其设宽度，不然可显示不出来哦。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献15条内容
所有评论(0)