分享一个Vig地图小程序，可以在地图上显示表格信息。实现的功能可以帮助租房者在租房时在地图上比对租房信息，选择自己喜欢的小基地。项目地址https://github.com/laboonly/w...功能介绍本小程序根据出租屋信息在地图上显示各个出租屋的位置，到公司的路线规划，详细信息形式。帮助租房的同学更加立体的比较每间出租屋的优劣势，找出自己喜欢的房子。使用说明请先获取高德api的key和获取高德地图的apikey，填写src/map.tsx的securityCode和apiKey，启动小程序后，选择姓名、地址对应的表格栏、价格、联系方式，填写地图中心（公司）。我来分享一下开发过程。我只是在开发过程中寻找房子。我想如果我可以使用vigtable小程序来管理租赁信息并实现我寻找最好房子的需求，那就太好了。地图小部件会很棒。顺便介绍一下vig表小程序以及高德地图相关方面的开发。需要理清规划要求。我期望的是小程序可以根据表格中的地址在地图上显示不同的标点，同时点击标点可以显示标点的详细信息，以及到每个标点的距离房子出租给公司。准备工作首先根据官方文档快速开始开发|VigTable开发人员中心，创建并安装小程序。二是高德地图的开发需要在高德开发者中心，注册一个账号，申请一个key，prepare-getstarted-tutorial-mapJSAPI|高德地图API。第一步加载高德地图JSAPI，更新V2.0版本。经过一番尝试，始终无法加载成功。咨询了伟哥的研发同学后，才知道可能是因为伟哥对iframe的支持，所以我决定不用新版的api，改用以前的V.14版的api。但是v.14版本的api加载不支持npm，所以借用了之前使用这个版本api的react-amap开源框架，以及关于地图加载的部分。源码链接，大意是用JS创建脚本标签加载。首先在小程序的框架下创建utils/ApiLoader.js文件。从上面的链接复制代码。这里的地图mapStyle，我使用的是高德的自定义主题，大家可以选择自己喜欢的地图主题，也可以自行配置。//部分代码constDEFAULT_CONFIG={v:'1.4.0',//版本号hostAndPath:'webapi.amap.com/maps',//高德api加载地址key:'',//高德apikey回调:'_amap_init_callback',//回调函数useAmapUI:true//是否使用高德UI}//获取脚本链接getScriptSrc(cfg){return`${this.protocol}//${cfg.hostAndPath}?v=${cfg.v}&key=${cfg.key}&callback=${cfg.callback}`;}//创建脚本jsbuildScriptTag(src){constscript=document.createElement('script');script.type='文本/javascript';script.async=true;//异步执行script.defer=true;//页面加载完成后，执行script.src=src;返回脚本；接下来，我们在小程序项目src中创建一个map.tsx文件，导入APILoader，创建一个MapComponent功能组件。填写地图配置参数。这里要注意挂载在地图上的DOM的宽高。从“反应”中导入反应，{useEffect，useState}；从'./setting'导入{设置}；importAPILoaderfrom'./utils/APILoader';//mapsecuritykeyconstsecurityCode='高德地图开发者中心应用密钥附带的安全密钥';//AmapapikeyconstapiKey='高德地图开发者中心申请的密钥';//设置地图安全密钥window['_AMapSecurityConfig']={securityJsCode:securityCode,}exportconstMapComponent:React.FC=()=>{//组件初始化时，加载sdk地图实例useEffect(()=>{newAPILoader({key:apiKey,version:null,protocol:'https'}).load().then(()=>{constlnglat=newwindow.AMap.LngLat(114.031040,22.624386);constamap=newwindow.AMap.Map('container',{zoom:12,//levelcenter:lnglat,//中心坐标viewMode:'3D',//使用3D视图mapStyle:'amap://styles/b379277160c9c3ce520627ad2e4bd22c'});window.amap=amap;},[]);返回(
