1.去高德地圖開發官網?高德開放平臺 | 高德地圖API

2 搜索“信息窗體和右鍵菜單” ，點擊第一個

3 選擇 默認信息窗體

4 在自己的代碼中創建窗體

? ? ? ? 代碼如下

data() {return {infoWindow: "",map: "",//地圖實例化對象info: [],//信息窗體的內容}}, methods: {initMap() {this.map = AMapLoader.load({"key": "ce55ff31b2ec8da2ea6fdd74663562d6", // 申請好的Web端開發者Key，首次調用 load 時必填"version": "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認為 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", {//設置地圖顯示的縮放級別zoom: 14,// 是否允許鼠標拖拽dragEnable: true,// 鼠標滾輪放大縮小scrollWheel: true,// 雙擊放大縮小doubleClickZoom: true,// 鍵盤控制發達縮小移動旋轉keyboardEnable: false,// 手勢控制touchZoom: false,center: [114.60794417790987, 38.01886471359529],//設置地圖中心點坐標//在指定位置打開信息窗體});//構建信息窗體中顯示的內容this.info.push("<p class='input-item'>河北省石家莊市方大科技園</p></div></div>");this.infoWindow = new AMap.InfoWindow({content: this.info.join("") //使用默認信息窗體框樣式，顯示信息內容});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引入高德地圖

總結

以上是生活随笔為你收集整理的在vue中使用高德地图添加窗体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。