1、创建react项目
umi具有移动端高清适配等插件,在做移动端项目的时候可以省很多事,项目创建好了以后运行起来
2、安装antd-mobild(搜索框组件)
npm install antd-mobile --save
ant的样式需要在.umirc.js里添加依赖
3、项目引入高德地图
在项目src/page下创建html模板文件document.ejs,并引入高德地图的js
这里的key需要从高德地图api里创建应用然后在这里替换掉就可以用了,然后在.umirc.js里引入添加外部依赖,这样就可以在应用中import导入使用了
4、开始编写代码
这里的实现思路是根据树形结构的数据实现进入下级返回上级,区分区域和店铺等等。
在副作用中初始化高德地图至state中,接着fetch树形结构的数据,因为一级区域进入默认选择,所以这里直接渲染第二级区域的点
const renderCircle = useCallback(zones => {
map.clearMap();
zones && zones.forEach(item => {
map.add(new AMap.Circle({
center: new AMap.LngLat(item.longitude, item.latitude), // 圆心位置
radius: 150000, //半径
strokeColor: '#b9a27c', //线颜色
strokeOpacity: 0.9, //线透明度
strokeWeight: 3, //线粗细度
fillColor: '#b9a27c', //填充颜色
fillOpacity: 0.7, //填充透明度
id: item.id,
parentId: item.parentId || null,
name: item.name,
type: item.type,
}).on('click', (e) => {
const pointObj = getMapPointTypeAndId(e.target);
const selected = searchSelected(mapData, pointObj && pointObj.type, pointObj && pointObj.id);
dispatch({
type: 'map/save',
payload: {
zoneId: pointObj && pointObj.id,
},
});
if (selected && selected.children && selected.children.length) {
if (selected.children[0].type === 'shop') {
renderShop(selected.children);
map.setZoomAndCenter(16, [selected.longitude, selected.latitude]);
} else {
renderCircle(selected.children);
map.setCenter([selected.longitude, selected.latitude]);
}
}
}));
let text = new AMap.Text({
text: item.name,
position: new AMap.LngLat(item.longitude, item.latitude),
anchor: 'bottom-left',
offset: new AMap.Pixel(10, -10),
});
text.setStyle({
'background-color': 'rgba(0,0,0,0)',
border: 'none',
'font-size': '36px',
'font-family': 'PingFangSC-Medium',
});
map.add(text);
});
}, [dispatch, map, mapData, renderShop]);
然后根据点击点位事件触发进入下一级的店铺渲染
const renderShop = useCallback(shops => {
map.clearMap();
shops && shops.forEach(item => {
let url = addressIcon;
map.add(new AMap.Marker({
icon: new AMap.Icon({
image: url,
size: new AMap.Size(120, 120),
imageSize: new AMap.Size(120, 120),
}),
position: [item.longitude, item.latitude],
id: item.id,
parentId: item.parentId || null,
name: item.name,
type: item.type,
shopCode: item.shopCode,
}).on('click', (e) => {
const pointObj = getMapPointTypeAndId(e.target);
const selected = searchSelected(mapData, pointObj && pointObj.type, pointObj && pointObj.id);
dispatch({
type: 'map/save',
payload: {
shopId: pointObj && pointObj.id,
},
});
map.setZoomAndCenter(16, [selected.longitude, selected.latitude]);
}));
let text = new AMap.Text({
text: item.name,
position: new AMap.LngLat(item.longitude, item.latitude),
anchor: 'bottom-left',
offset: new AMap.Pixel(70, -10),
});
text.setStyle({
'background-color': 'rgba(0,0,0,0)',
border: 'none',
'font-size': '36px',
'font-family': 'PingFangSC-Medium',
});
map.add(text);
});
}, [dispatch, map, mapData]);
详细代码在可访问 https://github.com/YunDuanke/umi-amap