賃貸物件の地図検索の導入

---

今回は、レンタルでの地図検索機能の実装についてお届けします。地図検索機能を実装する際の注意点は何ですか?実際の事例を見てみましょう。

layout: post
title: 賃貸物件を探すための地図の書き方を教える 30 分 賃貸物件を探すための地図を書くには、まず Python3 環境が必要です。詳細は説明しません。準備方法が本当にわからない場合は、右に曲がって、Liao Xuefeng 先生のブログをご覧ください。

HTML 部分

• コードは、Amap API+Python でレンタルの問題を解決します。家、読み込みデータ部分を変更しただけです

コードパス:/static/index.html

---

    <meta>
    <meta>
    <meta>
    <title>毕业生租房</title>
    <link>
    <link>
    <script></script>
    <script></script>
    <script></script>
    <script></script>
    <style>
    .control-panel {
        position: absolute;
        top: 30px;
        right: 賃貸物件の地図検索の導入0px;
    }
    
    .control-entry {
        width: 賃貸物件の地図検索の導入80px;
        background-color: rgba(賃貸物件の地図検索の導入賃貸物件の地図検索の導入9, 賃貸物件の地図検索の導入36, 賃貸物件の地図検索の導入53, 0.8);
        font-family: fantasy, sans-serif;
        text-align: left;
        color: white;
        overflow: auto;
        padding: 賃貸物件の地図検索の導入0px;
        margin-bottom: 賃貸物件の地図検索の導入0px;
    }
    
    .control-input {
        margin-left: 賃貸物件の地図検索の導入賃貸物件の地図検索の導入0px;
    }
    
    .control-input input[type="text"] {
        width: 賃貸物件の地図検索の導入60px;
    }
    
    .control-panel label {
        float: left;
        width: 賃貸物件の地図検索の導入賃貸物件の地図検索の導入0px;
    }
    
    #transfer-panel {
        position: absolute;
        background-color: white;
        max-height: 80%;
        overflow-y: auto;
        top: 30px;
        left: 賃貸物件の地図検索の導入0px;
        width: 賃貸物件の地図検索の導入50px;
    }
    </style>


    <p></p>
    <p>
        </p><p>
            <label>选择工作地点：</label>
            </p><p>
                <input>
            </p>
        
        <p>
            <label>选择通勤方式：</label>
            </p><p>
                <input> 公交+地铁
                <input> 地铁
            </p>
        
    
    <p></p>
    <script>
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoomEnable: true,
        center: [賃貸物件の地図検索の導入賃貸物件の地図検索の導入6.3974賃貸物件の地図検索の導入8, 39.909賃貸物件の地図検索の導入3],
        zoom: 賃貸物件の地図検索の導入賃貸物件の地図検索の導入
    });
    var scale = new AMap.Scale();
    map.addControl(scale);
    var arrivalRange = new AMap.ArrivalRange();
    var x, y, t, vehicle = "SUBWAY,BUS";
    var workAddress, workMarker;
    var rentMarkerArray = [];
    var polygonArray = [];
    var amapTransfer;
    var infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30)
    });
    var auto = new AMap.Autocomplete({
        input: "work-location"
    });
    
    AMap.event.addListener(auto, "select", workLocationSelected);
    function takeBus(radio) {
        vehicle = radio.value;
        loadWorkLocation()
    }
    function takeSubway(radio) {
        vehicle = radio.value;
        loadWorkLocation()
    }
    function workLocationSelected(e) {
        workAddress = e.poi.name;
        loadWorkLocation();
    }
    function loadWorkMarker(x, y, locationName) {
        workMarker = new AMap.Marker({
            map: map,
            title: locationName,
            icon: &#39;http://webapi.amap.com/theme/v賃貸物件の地図検索の導入.3/markers/n/mark_r.png&#39;,
            position: [x, y]
        });
    }
    function loadWorkRange(x, y, t, color, v) {
        arrivalRange.search([x, y], t, function(status, result) {
            if (result.bounds) {
                for (var i = 0; i < result.bounds.length; i++) {
                    var polygon = new AMap.Polygon({
                        map: map,
                        fillColor: color,
                        fillOpacity: "0.4",
                        strokeColor: color,
                        strokeOpacity: "0.8",
                        strokeWeight: 賃貸物件の地図検索の導入
                    });
                    polygon.setPath(result.bounds[i]);
                    polygonArray.push(polygon);
                }
            }
        }, {
            policy: v
        });
    }
    function addMarkerByAddress(address, url) {
        var geocoder = new AMap.Geocoder({
            city: "北京",
            radius: 賃貸物件の地図検索の導入000
        });
        geocoder.getLocation(address, function(status, result) {
            if (status === "complete" && result.info === &#39;OK&#39;) {
                var geocode = result.geocodes[0];
                rentMarker = new AMap.Marker({
                    map: map,
                    title: address,
                    icon: &#39;http://webapi.amap.com/theme/v賃貸物件の地図検索の導入.3/markers/n/mark_b.png&#39;,
                    position: [geocode.location.getLng(), geocode.location.getLat()]
                });
                rentMarkerArray.push(rentMarker);
                rentMarker.content = "<p>房源：<a target = &#39;_blank&#39; href=&#39;" + url + "&#39;>" + address + "<p>"
                rentMarker.on(&#39;click&#39;, function(e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                    if (amapTransfer) amapTransfer.clear();
                    amapTransfer = new AMap.Transfer({
                        map: map,
                        policy: AMap.TransferPolicy.LEAST_TIME,
                        city: "北京市",
                        panel: &#39;transfer-panel&#39;
                    });
                    amapTransfer.search([{
                        keyword: workAddress
                    }, {
                        keyword: address
                    }], function(status, result) {})
                });
            }
        })
    }
    function delWorkLocation() {
        if (polygonArray) map.remove(polygonArray);
        if (workMarker) map.remove(workMarker);
        polygonArray = [];
    }
    function delRentLocation() {
        if (rentMarkerArray) map.remove(rentMarkerArray);
        rentMarkerArray = [];
    }
    function loadWorkLocation() {
        delWorkLocation();
        var geocoder = new AMap.Geocoder({
            city: "北京",
            radius: 賃貸物件の地図検索の導入000
        });
        geocoder.getLocation(workAddress, function(status, result) {
            if (status === "complete" && result.info === &#39;OK&#39;) {
                var geocode = result.geocodes[0];
                x = geocode.location.getLng();
                y = geocode.location.getLat();
                loadWorkMarker(x, y);
                loadWorkRange(x, y, 60, "#3f67a5", vehicle);
                map.setZoomAndCenter(賃貸物件の地図検索の導入賃貸物件の地図検索の導入, [x, y]);
            }
        })
    }
    $(function()
    {
        $.get("/get_houses", function(data) {
            data.forEach(function(element, index) {
                addMarkerByAddress(element.address, element.url);
            });
        });
    })
    </script>

Python flask部分賃貸物件の地図検索の導入>

Python3環境、Flask、pymysql、BeautifulSoupのインストールに使用します

pip install Flask;
pip install pymysql;
pip install beautifulsoup4;
pip install requests;

その後、コードに直接進みます。 賃貸物件の地図検索の導入>

Path:/app.py

• from flask import Flask, request
  from flask import jsonify
  from flask import render_template
  from flask import Response
  import requests
  from bs4 import BeautifulSoup
  import pymysql
  app = Flask(name)
  @app.route("/get_houses_db/")
  def get_houses_db():
      # 从数据库读出来的数据,url为房源url,address为房源定位地址
      houses = []
      # Connect to the database
      connection = pymysql.connect(host='賃貸物件の地図検索の導入賃貸物件の地図検索の導入7.0.0.賃貸物件の地図検索の導入',
                                   user='root',
                                   password='賃貸物件の地図検索の導入賃貸物件の地図検索の導入3',
                                   db='你的数据库名字',
                                   charset='utf8mb4',
                                   cursorclass=pymysql.cursors.DictCursor)
      try:
          with connection.cursor() as cursor:
              # Read a single record
              sql = "SELECT 你的URL字段,你的地址字段 FROM 你的房源数据表 where 賃貸物件の地図検索の導入=賃貸物件の地図検索の導入;"
              keyword = request.args.get('keyword')
              if keyword is not None:
                  sql = sql + "查询字段 like %%s%" % keyword
              cursor.execute(sql)
              houses = cursor.fetchall()
      finally:
          connection.close()
      return jsonify(houses)
  @app.route("/get_houses", methods=['POST', 'GET'])
  def get_houses():
      # 直接从网页获取数据,url为房源url,address为房源定位地址
      houses = []
      city = request.args.get('city')
      if city is None:
          city = 'bj'
      city_url = 'http://%s.58.com' % city
      for page_num in range(賃貸物件の地図検索の導入, 賃貸物件の地図検索の導入0):
          url = "%s/pinpaigongyu/pn/%d/" % (city_url, page_num)
          headers = {
              'connection': "keep-alive",
              'upgrade-insecure-requests': "賃貸物件の地図検索の導入",
              'user-agent': "Mozilla/5.0 (Macintosh; Intel Mac OS X 賃貸物件の地図検索の導入0_賃貸物件の地図検索の導入3_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.賃貸物件の地図検索の導入8賃貸物件の地図検索の導入 Safari/537.36",
              'accept': "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
              'accept-encoding': "gzip, deflate",
              'accept-language': "zh-CN,zh;q=0.9,en;q=0.8,da;q=0.7",
              'cookie': "f=n; f=n; id58=c5/njVsEqPqC7y9vB/RHAg==; 58tj_uuid=ac94c044-cbb8-45賃貸物件の地図検索の導入c-b6be-974f90賃貸物件の地図検索の導入970賃貸物件の地図検索の導入0; new_uv=賃貸物件の地図検索の導入; utm_source=; spm=; init_refer=https%賃貸物件の地図検索の導入53A%賃貸物件の地図検索の導入5賃貸物件の地図検索の導入F%賃貸物件の地図検索の導入5賃貸物件の地図検索の導入Fcn.bing.com%賃貸物件の地図検索の導入5賃貸物件の地図検索の導入F; als=0; f=n; new_session=0; qz_gdt=; Hm_lvt_dcee4f66df賃貸物件の地図検索の導入8844賃貸物件の地図検索の導入賃貸物件の地図検索の導入賃貸物件の地図検索の導入ef0479976aabf賃貸物件の地図検索の導入=賃貸物件の地図検索の導入5賃貸物件の地図検索の導入703賃貸物件の地図検索の導入賃貸物件の地図検索の導入64,賃貸物件の地図検索の導入5賃貸物件の地図検索の導入703賃貸物件の地図検索の導入賃貸物件の地図検索の導入67,賃貸物件の地図検索の導入5賃貸物件の地図検索の導入703賃貸物件の地図検索の導入賃貸物件の地図検索の導入70,賃貸物件の地図検索の導入5賃貸物件の地図検索の導入703賃貸物件の地図検索の導入380; Hm_lpvt_dcee4f66df賃貸物件の地図検索の導入8844賃貸物件の地図検索の導入賃貸物件の地図検索の導入賃貸物件の地図検索の導入ef0479976aabf賃貸物件の地図検索の導入=賃貸物件の地図検索の導入5賃貸物件の地図検索の導入703賃貸物件の地図検索の導入4賃貸物件の地図検索の導入賃貸物件の地図検索の導入; ppStore_fingerprint=3賃貸物件の地図検索の導入83C7698賃貸物件の地図検索の導入CCD賃貸物件の地図検索の導入090B4賃貸物件の地図検索の導入ACBBF6賃貸物件の地図検索の導入4A4C96賃貸物件の地図検索の導入3FE967CDC69C58%EF%BC%BF賃貸物件の地図検索の導入5賃貸物件の地図検索の導入703賃貸物件の地図検索の導入4賃貸物件の地図検索の導入0843",
              'cache-control': "no-cache",
          }
          response = requests.request("GET", url, headers=headers)
          htmlSoup = BeautifulSoup(response.text, "html.parser")
          ul = htmlSoup.find(attrs={"class": "list"})
          if ul is None:
              continue
          li_list = ul.find_all("li")
          if li_list is None:
              continue
          for li in li_list:
              house = {}
              house['url'] = '%s/%s' % (city_url, li.find("a")['href'])
              house['address'] = li.find("h賃貸物件の地図検索の導入").text
              houses.append(house)
      return jsonify(houses)
  @app.route('/')
  def index():
      return app.send_static_file('index.html')
  if name == 'main':
      app.run(port=8888)
  # python3 安装flask之后,安装命令pip install Flask
  # 运行 python app.py

  Rendering:

賃貸物件の地図検索の導入>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、PHP に関する他の関連記事に注目してください。中国語のウェブサイト！

推奨書籍:

JS での JSON と Math のユースケース分析

Pixeler プロジェクト開発における EasyCanvas 描画ライブラリの使用に関する実際的な概要

PromiseA+

の実装手順の詳細な説明

以上が賃貸物件の地図検索の導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。