在vue中使用高德地图添加窗体
生活随笔
收集整理的這篇文章主要介紹了
在vue中使用高德地图添加窗体
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.去高德地圖開發(fā)官網(wǎng)?高德開放平臺 | 高德地圖API
2 搜索“信息窗體和右鍵菜單” ,點(diǎn)擊第一個(gè)
3 選擇 默認(rèn)信息窗體
4 在自己的代碼中創(chuàng)建窗體
? ? ? ? 代碼如下
data() {return {infoWindow: "",map: "",//地圖實(shí)例化對象info: [],//信息窗體的內(nèi)容}}, methods: {initMap() {this.map = AMapLoader.load({"key": "ce55ff31b2ec8da2ea6fdd74663562d6", // 申請好的Web端開發(fā)者Key,首次調(diào)用 load 時(shí)必填"version": "2.0", // 指定要加載的 JSAPI 的版本,缺省時(shí)默認(rèn)為 1.4.15"plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等"AMapUI": { // 是否加載 AMapUI,缺省不加載"version": '1.1', // AMapUI 缺省 1.1"plugins": [], // 需要加載的 AMapUI ui插件}}).then(AMap => {this.map = new AMap.Map("container1", {//設(shè)置地圖顯示的縮放級別zoom: 14,// 是否允許鼠標(biāo)拖拽dragEnable: true,// 鼠標(biāo)滾輪放大縮小scrollWheel: true,// 雙擊放大縮小doubleClickZoom: true,// 鍵盤控制發(fā)達(dá)縮小移動(dòng)旋轉(zhuǎn)keyboardEnable: false,// 手勢控制touchZoom: false,center: [114.60794417790987, 38.01886471359529],//設(shè)置地圖中心點(diǎn)坐標(biāo)//在指定位置打開信息窗體});//構(gòu)建信息窗體中顯示的內(nèi)容this.info.push("<p class='input-item'>河北省石家莊市方大科技園</p></div></div>");this.infoWindow = new AMap.InfoWindow({content: this.info.join("") //使用默認(rèn)信息窗體框樣式,顯示信息內(nèi)容});this.infoWindow.open(this.map, this.map.getCenter());}).catch(e => {console.log(e);});},},窗體的dom
<div content="info"></div>?最終的效果
如果不會在vue-cli引入高德地圖?可以參考以下文章?
vue-cli中使用高德地圖_abs_botton的博客-CSDN博客_vue引入高德地圖
總結(jié)
以上是生活随笔為你收集整理的在vue中使用高德地图添加窗体的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 瑞星杀毒软件 奇虎360杀毒软件 360
- 下一篇: html5倒计时秒杀怎么做,vue 设