react中嵌入高德地圖並Marker標點


做公司官網的項目,有個頁面是要求 嵌入地圖,在地圖上標注出公司位置

引入高德地圖 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM