知識點:建立Map實例,爲指定的位置設置標註html
參考博客:https://www.cnblogs.com/liuswi/p/3994757.htmlthis
1.效果圖:初始化地圖,設置指定經緯度爲地圖中心點座標spa
設置地圖標註htm
2.代碼:map.jsblog
(ps:申請百度地圖密鑰和引入百度地圖API,請參考個人另外一篇博客:Vue中使用百度地圖——根據輸入框輸入的內容, 獲取詳細地址)ip
<template>
<!--地圖容器-->
<div id="XSDFXPage" class="XSDFXPage"></div>
</template>
<script>
export default {
data () {
return {
}
},
mounted() {
//建立Map實例
var map = new BMap.Map("XSDFXPage");
// 初始化地圖,設置中心點座標
var point = new BMap.Point(121.160724,31.173277);// 建立點座標
map.centerAndZoom(point,15);
//添加鼠標滾動縮放
map.enableScrollWheelZoom();
//添加縮略圖控件
map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
//添加縮放平移控件
map.addControl(new BMap.NavigationControl());
//添加比例尺控件
map.addControl(new BMap.ScaleControl());
//添加地圖類型控件
//map.addControl(new BMap.MapTypeControl());
//設置標註的圖標
var icon = new BMap.Icon("./static/img/map.png",new BMap.Size(100,100));
//設置標註的經緯度
var marker = new BMap.Marker(new BMap.Point(121.160724,31.173277),{icon:icon});
//把標註添加到地圖上
map.addOverlay(marker);
var content = "<table>";
content = content + "<tr><td> 編號:001</td></tr>";
content = content + "<tr><td> 地點:上海漢得信息技術股份有限公司</td></tr>";
content = content + "<tr><td> 時間:2018-1-3</td></tr>";
content += "</table>";
var infowindow = new BMap.InfoWindow(content);
marker.addEventListener("click",function(){
this.openInfoWindow(infowindow);
});
//點擊地圖,獲取經緯度座標
map.addEventListener("click",function(e){
document.getElementById("aa").innerHTML = "經度座標:"+e.point.lng+" 緯度座標:"+e.point.lat;
});
}
}
</script>
<style scoped>
html,body,.XSDFXPage{
width: 50%;
height: 50%;
overflow: hidden;
margin: 0px auto;
font-family: "微軟雅黑";
}
</style>