如何在进行自动居中时从数组中排除零坐标标记

分类：编程问答

如何解决如何在进行自动居中时从数组中排除零坐标标记

伙计们！ 请帮我解决一个奇怪的问题。 在这里，我们有一个自定义的google map，在数组中有许多对象。我已经使用fitBounds进行了自动居中。不幸的是，某些对象具有（0,0）坐标。在我的示例中，您只能看到其中的一个，但在最终版本中，所有数据都将从远程XML文件中获取，并且那里有多个此类零坐标对象。

我是JS中的菜鸟，是否有一种简单的方法来过滤具有（0,0）坐标的对象，并在进行自动居中时忽略它们？

这是我的代码：

var locations = [
    ['1573785',37.92904993,-0.73309714,'180000 €','https://fotos15.apinmo.com/2344/1573785/1-1.jpg','0','82.00','Orihuela Costa'],['1573813','14900000 €','https://fotos15.apinmo.com/2344/1573813/1-1.jpg','La Manga del Mar Menor'],['1573853',37.9081557,-0.743851199999995,'595000 €','https://fotos15.apinmo.com/2344/1573853/3-1.jpg',['1573868',38.3668300727851,-0.5013084776552583,'1750000 €','https://fotos15.apinmo.com/2344/1573868/1-1.jpg','43','2000','Alicante'],['1573874',37.94373250149462,-0.7567906379699707,'1200000 €','https://fotos15.apinmo.com/2344/1573874/1-1.jpg','600','2',['1573909',37.8970045617763,-0.754108428955078,'210000 €','https://fotos15.apinmo.com/2344/1573909/4-1.jpg','4','90',['1573877',37.922449854629846,-0.7286167144775391,'12000000 €','https://fotos15.apinmo.com/2344/1573877/2-1.jpg','1','110',['1573879',37.9095917,-0.74301330000003,'260000 €','https://fotos15.apinmo.com/2344/1573879/4-1.jpg','78',['1573896',37.9144430700431,-0.725269317626953,'1995000 €','https://fotos15.apinmo.com/2344/1573896/5-1.jpg','5','477',['Дом в Кабо Роиг',37.916156,-0.724545199999966,'615000 €','https://fotos15.apinmo.com/2344/1573921/4-1.jpg','195',['Вилла в Кампоамор',37.9066009,-0.745517599999971,'1400000 €','https://fotos15.apinmo.com/2344/1573967/4-1.jpg','550',['1573968',37.94675263827021,-0.7060861587524414,'140000 €','https://fotos15.apinmo.com/2344/1573968/4-1.jpg','67','Torrevieja'],['1573969',37.942556074154616,-0.7123517990112305,'135000 €','https://fotos15.apinmo.com/2344/1573969/4-1.jpg','3','103',['1573982',37.909499757334224,-0.7429933547973633,'https://fotos15.apinmo.com/2344/1573982/8-1.jpg','83',['1573983',37.9391007,-0.7477284000000282,'130000 €','https://fotos15.apinmo.com/2344/1573983/3-1.jpg','98','Orihuela Costa']
];

var map = new google.maps.Map(document.getElementById('map'),{
    zoom: 12,center: new google.maps.LatLng(37.922,-0.728),mapTypeId: google.maps.MapTypeId.ROADMAP  
});

var limits = new google.maps.LatLngBounds();

var infowindow = new google.maps.InfoWindow();

var marker,i;
var gmarkers = [];
for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1],locations[i][2]),map: map,icon: {
    url: 'https://i.postimg.cc/CxLgfgXj/map-price-marker-1.png',labelOrigin: new google.maps.Point(60,20)
      },label: {
    labelOrigin: new google.maps.Marker(9,8),text: locations[i][3],color: "#FFFFFF",fontSize: "13px",fontWeight: "standard",fontFamily: "Montserrat",},});
    
    google.maps.event.addListener(marker,'click',(function (marker,i) {
        return function () {
            infowindow.setContent('<div id="iw-container">' +
    '<div>' +'<div class="house_card__label new_object">' +'<span>новинка</span>' + '</div>' +'</div>' +
    '<div class="image">' + '<a href="realty/villas/'+ locations[i][0] +'">' +'<img src="'+ locations[i][4] +'">' +'</a>' +'</div>' +
    '<div class="house_card__info">' +
        '<a href="realty/villas/'+ locations[i][0] +'">' +'<h4>' + locations[i][0] +'</h4></a>' +
        '<p class="house_price">'+ locations[i][3] +'</p>' +
        '<div class="house_features">' +
        '<span>Количество спален:</span>' +
        '<span>'+ locations[i][5] +'</span>' +
        '</div>' +
        '<div class="house_features">' +
        '<span>Жилая площадь (м²):</span>' +
        '<span>'+ locations[i][6] +'</span>' +
        '</div>' +
        '<div class="house_features">' +
        '<span>Количество ванных:</span>' +
        '<span>'+ locations[i][7] +'</span>' +
        '</div>' +
        '<div class="house_location">' +
        '<div class="house_location__text">'+ locations[i][8] +'</div>' +
        '</div>' +
        '</div>' +
        '</div>');
            infowindow.open(map,marker);     
        }
    })(marker,i));
    gmarkers.push(marker);
    
    limits.extend(marker.position);
    map.fitBounds(limits);
    
   }
 var styles = [{
    fontFamily:'Montserrat',fontWeight:'400',textColor:'#FFFFFF',textSize:'13',url: 'https://i.postimg.cc/6pjNrPxF/map-cluster-1.png',height: 63,width: 65,}]
  var clusterOptions = {gridSize: 30,maxZoom: 16,"styles":styles};
var markerCluster = new MarkerClusterer(map,gmarkers,clusterOptions);

还有JSfiddle。

解决方法

您可以使用df.startdate=pd.to_datetime(df.startdate) df.enddate=pd.to_datetime(df.enddate) df['date']=[pd.date_range(x,y ) for x,y in zip(df.startdate,df.enddate)] df=df.explode('date') Out[169]: startdate mwoutage enddate location date 0 2000-01-01 1000 2000-01-04 merica 2000-01-01 0 2000-01-01 1000 2000-01-04 merica 2000-01-02 0 2000-01-01 1000 2000-01-04 merica 2000-01-03 0 2000-01-01 1000 2000-01-04 merica 2000-01-04 1 2000-01-01 2000 2000-01-03 canadia 2000-01-01 1 2000-01-01 2000 2000-01-03 canadia 2000-01-02 1 2000-01-01 2000 2000-01-03 canadia 2000-01-03 方法通过filter线过滤元素，如下所示：

0
,

如果两个坐标均为0，则一种选择是跳过标记的创建：

for (i = 0; i < locations.length; i++) {
  if (locations[i][1] == 0 && locations[i][2] == 0)
    continue;
  // existing marker creation code ...

updated fiddle

enter image description here

代码段： 

var locations = [
  ['1573785',37.92904993,-0.73309714,'180000 €','https://fotos15.apinmo.com/2344/1573785/1-1.jpg','0','82.00','Orihuela Costa'],['1573813','14900000 €','https://fotos15.apinmo.com/2344/1573813/1-1.jpg','La Manga del Mar Menor'],['1573853',37.9081557,-0.743851199999995,'595000 €','https://fotos15.apinmo.com/2344/1573853/3-1.jpg',['1573868',38.3668300727851,-0.5013084776552583,'1750000 €','https://fotos15.apinmo.com/2344/1573868/1-1.jpg','43','2000','Alicante'],['1573874',37.94373250149462,-0.7567906379699707,'1200000 €','https://fotos15.apinmo.com/2344/1573874/1-1.jpg','600','2',['1573909',37.8970045617763,-0.754108428955078,'210000 €','https://fotos15.apinmo.com/2344/1573909/4-1.jpg','4','90',['1573877',37.922449854629846,-0.7286167144775391,'12000000 €','https://fotos15.apinmo.com/2344/1573877/2-1.jpg','1','110',['1573879',37.9095917,-0.74301330000003,'260000 €','https://fotos15.apinmo.com/2344/1573879/4-1.jpg','78',['1573896',37.9144430700431,-0.725269317626953,'1995000 €','https://fotos15.apinmo.com/2344/1573896/5-1.jpg','5','477',['Дом в Кабо Роиг',37.916156,-0.724545199999966,'615000 €','https://fotos15.apinmo.com/2344/1573921/4-1.jpg','195',['Вилла в Кампоамор',37.9066009,-0.745517599999971,'1400000 €','https://fotos15.apinmo.com/2344/1573967/4-1.jpg','550',['1573968',37.94675263827021,-0.7060861587524414,'140000 €','https://fotos15.apinmo.com/2344/1573968/4-1.jpg','67','Torrevieja'],['1573969',37.942556074154616,-0.7123517990112305,'135000 €','https://fotos15.apinmo.com/2344/1573969/4-1.jpg','3','103',['1573982',37.909499757334224,-0.7429933547973633,'https://fotos15.apinmo.com/2344/1573982/8-1.jpg','83',['1573983',37.9391007,-0.7477284000000282,'130000 €','https://fotos15.apinmo.com/2344/1573983/3-1.jpg','98','Orihuela Costa']
];

var map = new google.maps.Map(document.getElementById('map'),{
  zoom: 12,center: new google.maps.LatLng(37.922,-0.728),mapTypeId: google.maps.MapTypeId.ROADMAP
});

var limits = new google.maps.LatLngBounds();

var infowindow = new google.maps.InfoWindow();

var marker,i;
var gmarkers = [];
for (i = 0; i < locations.length; i++) {
  //var latLng = new google.maps.LatLng(locations[i][1],locations[i][2]);
  console.log("lat=" + locations[i][1] + ",lng=" + locations[i][2]);
  if (locations[i][1] == 0 && locations[i][2] == 0)
    continue;

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1],locations[i][2]),map: map,icon: {
      url: 'https://i.postimg.cc/CxLgfgXj/map-price-marker-1.png',labelOrigin: new google.maps.Point(60,20)
    },label: {
      labelOrigin: new google.maps.Marker(9,8),text: locations[i][3],color: "#FFFFFF",fontSize: "13px",fontWeight: "standard",fontFamily: "Montserrat",},});

  google.maps.event.addListener(marker,'click',(function(marker,i) {
    return function() {
      infowindow.setContent('<div id="iw-container">' +
        '<div>' + '<div class="house_card__label new_object">' + '<span>новинка</span>' + '</div>' + '</div>' +
        '<div class="image">' + '<a href="realty/villas/' + locations[i][0] + '">' + '<img src="' + locations[i][4] + '">' + '</a>' + '</div>' +
        '<div class="house_card__info">' +
        '<a href="realty/villas/' + locations[i][0] + '">' + '<h4>' + locations[i][0] + '</h4></a>' +
        '<p class="house_price">' + locations[i][3] + '</p>' +
        '<div class="house_features">' +
        '<span>Количество спален:</span>' +
        '<span>' + locations[i][5] + '</span>' +
        '</div>' +
        '<div class="house_features">' +
        '<span>Жилая площадь (м²):</span>' +
        '<span>' + locations[i][6] + '</span>' +
        '</div>' +
        '<div class="house_features">' +
        '<span>Количество ванных:</span>' +
        '<span>' + locations[i][7] + '</span>' +
        '</div>' +
        '<div class="house_location">' +
        '<div class="house_location__text">' + locations[i][8] + '</div>' +
        '</div>' +
        '</div>' +
        '</div>');
      infowindow.open(map,marker);
    }
  })(marker,i));
  gmarkers.push(marker);

  limits.extend(marker.position);
  map.fitBounds(limits);

}
var styles = [{
  fontFamily: 'Montserrat',fontWeight: '400',textColor: '#FFFFFF',textSize: '13',url: 'https://i.postimg.cc/6pjNrPxF/map-cluster-1.png',height: 63,width: 65,}]
var clusterOptions = {
  gridSize: 30,maxZoom: 16,/* "styles":styles,*/
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
};
var markerCluster = new MarkerClusterer(map,gmarkers,clusterOptions);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap');
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<style>
  #map {
    height: 100%;
    width: 100%;
    background-color: #CCC;
  }
  
  html,body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  .gm-style .gm-style-iw-t::after {
    background: none;
    box-shadow: none;
  }
  
  .gm-style .gm-style-iw-c {
    padding: 0 !important;
    overflow: visible !important;
  }
  
  .gm-style .gm-style-iw-d {
    overflow: hidden !important;
  }
  
  button.gm-ui-hover-effect {
    background: url(https://i.postimg.cc/8PGDNWbX/xs.png) !important;
    background-size: contain !important;
    z-index: 10 !important;
    right: -9px !important;
  }
  
  button.gm-ui-hover-effect img {
    display: none !important;
  }
  
  .gm-style-iw {
    width: 250px !important;
    height: 370px !important;
    top: 5px !important;
    left: 0px !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 10px 0 #979ca54c !important;
    border-radius: 20px !important;
    font-family: 'Montserrat',monospace !important;
    position: relative;
    transition: all 1s ease-out;
  }
  
  .gm-style-iw img {
    width: 100%;
    max-height: 187px;
  }
  
  .gm-style-iw a {
    text-decoration: none !important;
    color: #000 !important;
  }
  
  .gm-style-iw h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
    margin: 12px 0 10px 0 !important;
  }
  
  .gm-style-iw .house_price {
    font-size: 20px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: #5dbfc5 !important;
    margin: 0 0 9px 0 !important;
  }
  
  .gm-style-iw .house_features {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.42;
    color: #a1a1a1;
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-gap: 10px;
    margin: 0;
  }
  
  .gm-style-iw .house_features span:last-child {
    text-align: right;
    color: #5dbfc5;
    margin: 0 10px 0 0;
  }
  
  .gm-style-iw .house_location {
    margin: 15px 0 0 0;
  }
  
  .gm-style-iw .house_location__text {
    font-size: 10px;
    font-weight: 600;
    line-height: 20px;
    color: #5dbfc5;
    padding: 0 0 0 26px;
    background-image: url(https://i.postimg.cc/GhjR227L/pin-1.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 21px 26px;
    ;
  }
</style>
<div id="map"></div>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot