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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。