Bootstrap

原生Js从0开始实现一个链家网地图画圈找房功能

概述

最近做项目的时候遇到的一个需求:要实现一个链家网地图找房中的画圈找房功能。链家网是采用百度地图实现房源展示,先来看看链家网的画圈找房功能,有木有很炫酷~~,可以到链家上体验一下

链家网画圈找房效果

下面是项目中实现的画圈找房,可以看出效果和链家网很相似

项目中画圈找房效果

下面就来手把手从0开始实现一个画圈找房的demo~~ Js代码一共200行左右,很轻量

为什么写这篇文章

主要是想分享下在完成这个画圈找房功能的过程中,面对没有现成api调用或者方案的问题,自己的思路过程以及遇到的一些问题是怎么解决的

Step 0: 准备工作

此demo未采用框架,用原生js实现,项目里是用react技术栈实现,打开你最喜欢的IDE,新建如下3个文件draw.js, draw.css, draw.html, 我这里是用webstorm编辑代码,demo结构如下图

draw.html,draw.css代码如下,js文件暂时为空,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链家网画圈找房demo</title>
    <link href="draw.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="wrapper">
    <div class="map-container" id="container">
    </div>
    <div class="panel">
        <div class="top">
            <button class="btn" id="draw">画圈找房</button>
            <button class="btn" id="exit">退出画圈</button>
        </div>
        <div class="bottom">
            <ul id="data">
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="draw.js"></script>
</body>
</html>
复制代码
html,body{
    margin:0;
    padding:0;
    height:100%;
    min-width:800px;
}
ul,li{
    margin:0;
    padding:0;
}
.wrapper{
    height:100%;
    padding-right:300px;
}
.map-container{
    height:100%;
    width:
;