Vue中使用百度地圖——設置地圖標注

知識點：創建Map實例，為指定的位置設置標注

參考博客：https://www.cnblogs.com/liuswi/p/3994757.html

 

1.效果圖：初始化地圖，設置指定經緯度為地圖中心點坐標

設置地圖標注

2.代碼：map.js

（ps:申請百度地圖密鑰和引入百度地圖API，請參考我的另一篇博客:Vue中使用百度地圖——根據輸入框輸入的內容，  獲取詳細地址）

<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+" &nbsp;緯度坐標："+e.point.lat;
 });


 }
 }
</script>
<style scoped>
 html,body,.XSDFXPage{
 width: 50%;
 height: 50%;
 overflow: hidden;
 margin: 0px auto;
 font-family: "微軟雅黑";
 }
</style>