vue、百度地圖
阿新 • • 發佈：2018-11-28
點選頁面中的位置，跳轉到百度地圖，並且根據經緯度定位到具體位置
開啟 百度地圖開放平臺 | 百度地圖API SDK | 地圖開發 獲取 金鑰ak
頁面中在位置的地方新增一個點選事件
<div class="lxdz_nr" @click = "baidu(116.442208,39.922129)"> //具體的經緯度，可以直接寫在這裡，也可以寫給地址的位置 <p>xx公司</p> <p>北京市xxxxxx</p>
<p>400-665-0265</p>
</div>
<div class="lxdz_nr" @click = "baidu(116.442208,39.922129)"> //具體的經緯度
<p>xx公司</p>
<p>北京市xxxxxx</p>
<p>400-665-0265</p>
</div>
export default { methods: { baidu (lng, lat) { sessionStorage.setItem('bddt', 1) this.$router.push({path: '/Lxdt', query: {lng: lng, lat: lat}})
<script>
以上是放位置的頁面，跳轉到百度地圖，需要再新建一個頁面 （就是上面寫的path：/Lxdt）
<template> <div class="dt"> <div id="bddt"> </div> </div> </template> <script> export default { name: 'lxdt', mounted () { if (sessionStorage.getItem('bddt') - 0 === 1) { sessionStorage.setItem('bddt', 0) setTimeout(_ => { window.history.go(0) }, 0) } } } </script> <style scoped> .dt{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; } #bddt{ height:100% } </style>
本來想直接在vue頁面中顯示出來或者寫成元件，但是看百度api和看一些文件，寫在裡面也是各種報錯，只好把程式碼寫在html裡，程式碼如下：
先在html裡引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=百度獲取的金鑰"></script>
<!DOCTYPE html> <html><head> <meta charset="utf-8"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=百度獲取的金鑰"></script> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="shortcut icon" href="./static/img/bitbug_favicon.ico" type="image/x-icon" /> <title>北京xxxx有限公司</title> </head>
<body> <div id="app"></div> <!-- built files will be auto injected --> </body>
</html> <script> function getUrlData() { var url = location.hash var arr = [] var obj = {} if (url.indexOf('?') === -1) { return } else { url = url.split('?')[1] arr = url.split('&') arr.forEach(function (k) { obj[k.split('=')[0]] = k.split('=')[1] }) } return obj } var XY = { lng: getUrlData().lng, lat: getUrlData().lat } var opts = { width: 250, // 資訊視窗寬度 height: 100, // 資訊視窗高度 title: "Hello" // 資訊視窗標題 } var map = new BMap.Map("bddt"); // 建立地圖例項 var point = new BMap.Point(XY.lng, XY.lat); // 建立點座標 map.centerAndZoom(point, 15); map.enableScrollWheelZoom(); // 開啟滾輪縮放 var marker = new BMap.Marker(point); //建立一個標誌物圓點 map.addOverlay(marker); //以上如果還有需要的內容都可以在百度地圖文件裡新增
</script>
這也是第一次做地圖之類的頁面，簡單實現下，以後再做改善