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

本文介绍了如何从零开始使用原生JavaScript实现类似链家网的地图画圈找房功能。通过创建地图、绑定事件、实现画圈操作以及判断点在多边形内的算法，详细阐述了实现过程和遇到的问题。文中还提到百度地图API的使用，包括初始化地图、放置点、画线和多边形，并分享了在开发过程中的一些经验和技巧。

摘要由CSDN通过智能技术生成

概述

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

链家网画圈找房效果

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

项目中画圈找房效果

下面就来手把手从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: