วิธีแก้ปัญหา: ใช้การประมวลผลแผนที่แบบคงที่ Baidu (http://lbsyun.baidu.com/index.php?title=static) และชื่อโดเมนถูกกำหนด (http://api.map.baidu.com)
<!-html-> <el-image: src = `/baidu-static/staticimage/v2? ak = yourak & width = 1024 & ความสูง = 400 ¢ er = $ {center.lng}, $ {center.lat} & zoom = 16`> class = dot> ... </span> </div> </el-image> <!-nginx-> ตำแหน่ง ^~/baidu-static/{add_header 'การควบคุมการเข้าถึง-origin' $ http_origin เสมอ add_header เสมอ; add_header 'Access-control-allow-headers' 'ยอมรับการอนุญาต, cache-control, content-type, dnt, if-modified-since, Keep-alive, Origin, user-agent, x-requested-with' proxy_pass http://api.map.baidu.com/; คำถามที่ 2: วิธีแสดงการซ้อนทับบนแผนที่วิธีแก้ปัญหา: หลังจากดูแผนที่ API ของ Baidu Map Static แล้วมันไม่สามารถรองรับรูปแบบการซ้อนทับแบบกำหนดเองได้ดี อย่างมากคุณสามารถระบุภาพที่กำหนดเอง (ไม่ใช่ภาพท้องถิ่น) ฉันลองใช้วิธีการมากมายที่อยู่ตรงกลางและฉันคิดว่ามันเป็นไปได้ที่จะใช้ OpenLayers.PAP แต่การเปลี่ยนแปลงของรหัสปริมาณมากเกินไปดังนั้นฉันจึงยอมแพ้อย่างเด็ดขาด ต่อมาฉันคิดว่าจะใช้ DIV เพื่อจำลองการครอบคลุมโดยตรงและตั้งค่าสูงกว่าระดับภาพคงที่เล็กน้อยสามารถแก้ปัญหาได้
คำถามที่ 3: ฉันวาดวงกลมประในสไตล์ CSS ตัวเลขที่สร้างขึ้นหลังจาก HTML2CANVAS ถูกประมวลผลและพบว่าเส้นประกลายเป็นเส้นทึบวิธีแก้ปัญหา: ใช้ผ้าใบเพื่อวาดวงกลม
คำถามที่ 4: ไอคอนใช้การวางตำแหน่งสัมบูรณ์และกราฟที่สร้างขึ้นหลังจากประมวลผล HTML2CANVAS และพบว่าไอคอนไม่ปรากฏขึ้นวิธีแก้ปัญหา: ตั้งค่า z-index สำหรับไอคอนให้มากกว่าระดับกราฟ Baidu Static (PS: เมื่อใช้รูปแบบกราฟคงที่สำหรับการวางตำแหน่งสัมบูรณ์)
คำถามที่ 5: ภาพที่สร้างขึ้นหลังจาก HTML2CANVAS ถูกประมวลผลด้วยสีพื้นหลังสีดำวิธีแก้ปัญหา: เปลี่ยนรูปภาพ/png เป็น image/jpg
ลอง {html2canvas (SharePage, {usecors: true}). จากนั้น ((canvas) => {const imgbase64 = canvas.todataurl ('image/jpg') this.data64 = imgbase64})ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น