好客租房165-根据定位获取当前城市

简介: 好客租房165-根据定位获取当前城市

1.4根据定位展示当前城市

1获取当前定位城市

2使用地址解析器获取城市坐标

3调用centerAndZoom

4在地图中添加比例尺和平移缩放

import React from 'react'
// 导入样式
// import './index.scss'
import styles from  "./index.module.scss"
import NavHeader from '../../components/NavHeader';
export default class Map extends React.Component {
  componentDidMount() {
      //获取
   const {label,value} =JSON.parse(localStorage.getItem("hkzf_city"))
    console.log(label,value)
    //创建地址解析器
    const myGeo=new window.BMapGL.Geocoder()
    myGeo.getPoint(label,(point)=>{
        if(point){
            map.centerAndZoom(point,11)
            // map.addOverlay(new window.BMapGL.Market(point))
            map.addControl(new window.BMapGL.NavigationControl())
            map.addControl(new window.BMapGL.ScaleControl())
        }
    },label)
    var map = new window.BMapGL.Map("container"); // 创建地图实例 
    var point = new window.BMapGL.Point(116.404, 39.915); // 创建点坐标 
    map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
  }
  render() {
    return (
        <div className={styles.map}>
            {/* 顶部导航栏组件 */}
            <NavHeader onLeftClick={()=>{
            }}>
                地图找房
            </NavHeader>
        <div id="container" className={styles.container}></div>
      </div>
    )
  }
}

运行结果

图片.png

相关文章
|
7月前
|
存储 分布式计算 OLAP
百观科技基于阿里云 EMR 的数据湖实践分享
百观科技为应对海量复杂数据处理的算力与成本挑战,基于阿里云 EMR 构建数据湖。EMR 依托高可用的 OSS 存储、开箱即用的 Hadoop/Spark/Iceberg 等开源技术生态及弹性调度,实现数据接入、清洗、聚合与分析全流程。通过 DLF 与 Iceberg 的优化、阶梯式弹性调度(资源利用率提升至70%)及倚天 ARM 机型搭配 EMR Trino 方案,兼顾性能与成本,支撑数据分析需求,降低算力成本。
519 59
|
SQL 分布式计算 监控
Hadoop-20 Flume 采集数据双写至本地+HDFS中 监控目录变化 3个Agent MemoryChannel Source对比
Hadoop-20 Flume 采集数据双写至本地+HDFS中 监控目录变化 3个Agent MemoryChannel Source对比
206 3
|
机器学习/深度学习 弹性计算 算法
阿里云服务器ECS中长期成本节省计划简介,助你优化上云成本
在云计算时代,企业对于云资源的需求日益增长,如何在保障业务稳定运行的同时,有效控制成本,成为许多企业关注的焦点。阿里云针对这部分用户的需求推出了ECS中长期成本节省计划(Saving Plan),节省计划是一种折扣权益计划,可以抵扣按量付费实例(不含抢占式实例)的账单。相比包年包月实例、预留实例券+按量付费实例的组合,节省计划+按量付费实例的组合在使用上更加灵活。本文将详细介绍这一计划的核心优势、应用场景以及如何参与,助您轻松优化上云成本。
阿里云服务器ECS中长期成本节省计划简介,助你优化上云成本
|
存储 SQL Prometheus
【TiDB原理与实战详解】1、原理与基础优化~学不会? 不存在的!
TiDB 是一款开源的分布式关系型数据库,具备水平扩展、高可用性和强一致性等特点,适用于高并发、低延迟的大规模数据处理场景。其架构设计灵感源自 Google 的 Spanner 和 F1,并兼容 MySQL。TiDB 集群由 TiDB Server(无状态 SQL 层)、PD(元数据管理模块)和 TiKV Server(分布式存储层)组成,还包含 TiFlash(列存储引擎)以加速分析型查询。TiDB 支持分布式事务和多种事务模式,适用于 OLTP 和 HTAP 场景,如电商平台和金融系统。此外,TiDB 的部署要求包括高性能硬件配置和特定网络设置,以确保系统的稳定性和高效运行。
|
JavaScript 前端开发
typeof 类型判断
typeof 类型判断
128 1
|
数据格式
什么是HTML?
【8月更文挑战第27天】什么是HTML?
202 2
|
存储 C# 数据格式
WPF动画教程(PointAnimationUsingPath的使用)
WPF动画教程(PointAnimationUsingPath的使用)
179 0
|
SQL 分布式计算 Hadoop
Hadoop学习笔记(HDP)-Part.01 关于HDP
本文介绍HDP大数据平台部署全流程,涵盖Ambari集群管理、核心组件原理、资源规划及环境配置,并详细讲解JDK、MySQL、Kerberos等依赖安装,以及HDFS、YARN、Hive、HBase、Spark、Flink、Kafka等组件的部署方法。
495 0
|
缓存 JavaScript API
Vue新一代状态管理工具—Pinia—都2023年了,快学起来吧!
Vue新一代状态管理工具—Pinia—都2023年了,快学起来吧!
245 0