做公司官網的項目,有個頁面是要求 嵌入地圖,在地圖上標注出公司位置
引入高德地圖
1.在index.html文件中script標簽引入高德的api,key值是你要預先在高德官網申請的
2.你要寫的頁面 定義地圖常量,注意要是window.AMap,不然可能識別不到
const AMap = window.AMap;
3.componentDidMount 中寫方法
4.定義一個div
id名要和上面代碼中的一致,並且寬高要給到100%
5.效果就是這樣啦。地圖是可以縮放的
p.s.如果需要顯示的是一個窗體,里面附上文字或圖片,那可以像下面這樣寫
這個是官網的例子,如果需要顯示的是信息窗體,就是 new AMap.InfoWindow({內容})
詳情請看官網https://lbs.amap.com/demo/javascript-api/example/event-overlay/infowindow-event