|
|
覆盖物
import React from &#39;react&#39;// 导入封装好的 NavHeader 组件import NavHeader from &#39;../../components/NavHeader&#39;// 导入样式// import &#39;./index.scss&#39;import styles from &#39;./index.module.css&#39;// 解决脚手架中全局变量访问的问题const BMapGL = window.BMapGL// 覆盖物样式const labelStyle = { cursor: &#39;pointer&#39;, border: &#39;0px solid rgb(255, 0, 0)&#39;, padding: &#39;0px&#39;, whiteSpace: &#39;nowrap&#39;, fontSize: &#39;12px&#39;, color: &#39;rgb(255, 255, 255)&#39;, textAlign: &#39;center&#39;}export default class Map extends React.Component { componentDidMount() { this.initMap() } // 初始化地图 initMap() { // 获取当前定位城市 const { label, value } = JSON.parse(localStorage. getItem(&#39;hkzf_city&#39;)) console.log(label, value) // 初始化地图实例 const map = new BMapGL.Map(&#39;container&#39;) // 创建地址解析器实例 const myGeo = new BMapGL.Geocoder() // 将地址解析结果显示在地图上，并调整地图视野 myGeo.getPoint( label, point => { if (point) { // 初始化地图 map.centerAndZoom(point, 11) // 添加常用控件 map.addControl(new BMapGL.NavigationControl()) map.addControl(new BMapGL.ScaleControl()) /* 1 调用 Label 的 setContent() 方法，传入 HTML 结构， 修改 HTML 内容的样式。 2 调用 setStyle() 修改覆盖物样式。 3 给文本覆盖物添加单击事件。 <div class=&#34;${styles.bubble}&#34;> <p class=&#34;${styles.name}&#34;>${name}</p> <p>${num}套</p> </div> */ const opts = { position: point, offset: new BMapGL.Size(-35, -35) } // 说明：设置 setContent 后，//第一个参数中设置的文本内容就失效了，因此，直接清空即可 const label = new BMapGL.Label(&#39;&#39;, opts) // 设置房源覆盖物内容 label.setContent(` <div class=&#34;${styles.bubble}&#34;> <p class=&#34;${styles.name}&#34;>浦东</p> <p>99套</p> </div> `) // 设置样式 label.setStyle(labelStyle) // 添加单击事件 label.addEventListener(&#39;click&#39;, () => { console.log(&#39;房源覆盖物被点击了&#39;) }) // 添加覆盖物到地图中 map.addOverlay(label) } }, label ) } render() { return ( <div className={styles.map}> {/* 顶部导航栏组件 */} <NavHeader>地图找房</NavHeader> {/* 地图容器元素 */} <div id=&#34;container&#34; className={styles.container} /> </div> ) }}
运行结果
 |
|
发表于 2022-10-7 20:12:28