05-HK 引入百度地圖
本文是 hkzf 移動端 的系列教程，旨在通過一系列的文章來幫助初學者快速掌握基于React技術棧的項目開發。
配置AK
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A00c8eadc65366c5c92155ebbbf535a1"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
初始化地圖功能
src/pages/BMap/index.js
init_city = async (cityName) => {
// 百度地圖API功能
this.map = new BMap.Map("allmap"); // 建立Map執行個體
this.map.centerAndZoom(cityName, this.Sites[this.SiteIndex].zoom); // 初始化地圖,設定中心點坐标和地圖級别
//添加地圖類型控件
this.map.addControl(new BMap.NavigationControl());
this.map.addControl(new BMap.ScaleControl());
this.map.setCurrentCity(cityName); // 設定地圖顯示的城市 此項是必須設定的
//擷取區域的id資訊
let cityObj = (await axios.get("/area/info?name=" + cityName)).body;
this.drawCityHouse(cityObj);
} 設定繪制房類型
Sites = [
{ zoom: 12, level: 1, shape: "circle", name: "城市" },
{ zoom: 14, level: 2, shape: "circle", name: "區域" },
{ zoom: 18, level: 3, shape: "rect", name: "小區" },
] 繪制房源
drawCityHouse = async (cityObj) => {
let res = (await axios.get("/area/map?id=" + cityObj.value)).body;
this.map.clearOverlays();
//把資料渲染到地圖上面
//已經點選過一次了
if (this.Sites[this.SiteIndex].zoom !== this.Sites[0].zoom) {
let point = new BMap.Point(cityObj.coord.longitude, cityObj.coord.latitude);
this.map.centerAndZoom(point, this.Sites[this.SiteIndex].zoom)
}
res.forEach(e => {
let point = new BMap.Point(e.coord.longitude, e.coord.latitude);
let opts = {
position: point,
offset: new BMap.Size(0, 0)
}
let label = "";
if (this.Sites[this.SiteIndex].shape === "circle")
label = new BMap.Label("<div class='circle'><span>" + e.label + "<span><br/>" + e.count + "套</div>", opts);
else
label = new BMap.Label("<div class='rect'><span>" + e.label + "<span><br/>" + e.count + "套</div>", opts);
label.setStyle({
"background-color": "transparent",
border: "none"
})
label.addEventListener("click", () => {
if (this.SiteIndex === this.Sites.length) {
this.getDetail(e);
this.setState({
is_show: true
})
// 讓底部的div 變化都穩定了
setTimeout(() => {
// 再讓被點選的标簽 居中即可
this.map.panTo(point);
}, 500);
} else {
//繪制二級房源
this.drawCityHouse(e);
}
})
this.map.addOverlay(label);
});
this.SiteIndex++;
} ![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)