谷歌地图开发 Maps JavaScript API # 自定义标志物

2024-03-10 09:59

本文主要是介绍谷歌地图开发 Maps JavaScript API # 自定义标志物,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

电商开发,客户要求结合线下实体店,给顾客提供实体店的信息。点击地图实体店标志,找到面板弹出实体店的具体信息,或者点击左侧面板,相对应的实体店标志移动到地图中间,改变图片

获取 获取api key

1.在进行地图操作前,必须初始化

 var map = new google.maps.Map(document.getElementById('map-layout'), {zoom: 10,mapTypeControl: false,streetViewControl:false,gestureHandling: 'cooperative',center: {lat: 22.545459, lng: 114.11728}});

2.自定义标志物

自定义标志物通过 闭包抛出,为后面的面板操作提供可行性

虽然自定义标志物可以直接点击触发一些函数,但是有时候需要点击面板去触发,这就需要去找到相关的自定义标志物的闭包去执行相关业函数。

 allTags = renderMakers(map,icon,selected_icon); 
// markerfunction renderMakers(map,klasseicon,selectedicon) {var tagContainer = {},klasse_icon = klasseicon,selected_klasse_icon = selectedicon;for(store in allStores){for(var i=0;i<allStores[store].length;i++){var Tag = new google.maps.Marker({position: {lat: Number(allStores[store][i].latitude),lng:Number(allStores[store][i].longitude)},map: map,icon: icon,info:{}});tagContainer[allStores[store][i].identifier] = Tag;Tag.setTitle(allStores[store][i].name);//点击标志物,可以执行一些函数,如移到中间,手机的话,改变视图大小(css)Tag.addListener('click', function() {map.setZoom(12);map.panTo(this.getPosition());if(!window.activeIdentify=="" ){allTags[window.activeIdentify].setIcon(icon);}window.activeIdentify  = this.info.identifier;this.setIcon(selected_icon);this.setAnimation(google.maps.Animation.BOUNCE);var markerSelf = this;$(".map-wrapper").addClass("active");setTimeout(function () {markerSelf.setAnimation(null);},2000);});}}return tagContainer;}

 

 

 

下面通过 自定义标志物 的identify ,区闭包里寻找到 标志物, 让他们显示和隐藏,在视图范围的标志物内显示,不在的隐藏

 allTags[tag].setVisible(true);allTags[tag].setVisible(false);
 map.addListener("bounds_changed",function () {mapMove(allTags,map);});// map movefunction mapMove(allTags,map){if(!window.nearby){return;}var bs = map.getBounds();   //获取可视区域var lats = bs.na;// var lngs = bs.ia;var lngs = bs.ga;var swLng = lngs.j ,//西南swLat = lats.j ,neLng = lngs.l ,//东北neLat = lats.l;var storeList='';for(tag in allTags){var lng = allTags[tag].info.lng,lat =  allTags[tag].info.lat;if(lng>swLng && lng<neLng && lat>swLat && lat<neLat){allTags[tag].setVisible(true);}else{allTags[tag].setVisible(false);}}if(window.activeIdentify!=""){$("li[data-idenify='"+window.activeIdentify+"']").addClass("active");}}

 

地图视图发送改变,判断哪些标志物还在视图范围

map.addListener("bounds_changed",function () {mapMove(allTags,map);});

 

 

 

移动端拖拽事件,改变地图大小

 google.maps.event.addListener(map,"dragstart",function(event){$(".map-wrapper").removeClass(" active");});

我不确定通过闭包操作标志物的方式是否完美,毕竟是我第一次做谷歌地图,如果大家发现更好的方式,可以留言告诉我,感激不尽!

这篇关于谷歌地图开发 Maps JavaScript API # 自定义标志物的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/793879

相关文章

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

Java对异常的认识与异常的处理小结

《Java对异常的认识与异常的处理小结》Java程序在运行时可能出现的错误或非正常情况称为异常,下面给大家介绍Java对异常的认识与异常的处理,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参... 目录一、认识异常与异常类型。二、异常的处理三、总结 一、认识异常与异常类型。(1)简单定义-什么是

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.

SpringBoot排查和解决JSON解析错误(400 Bad Request)的方法

《SpringBoot排查和解决JSON解析错误(400BadRequest)的方法》在开发SpringBootRESTfulAPI时,客户端与服务端的数据交互通常使用JSON格式,然而,JSON... 目录问题背景1. 问题描述2. 错误分析解决方案1. 手动重新输入jsON2. 使用工具清理JSON3.

java中long的一些常见用法

《java中long的一些常见用法》在Java中,long是一种基本数据类型,用于表示长整型数值,接下来通过本文给大家介绍java中long的一些常见用法,感兴趣的朋友一起看看吧... 在Java中,long是一种基本数据类型,用于表示长整型数值。它的取值范围比int更大,从-922337203685477

java Long 与long之间的转换流程

《javaLong与long之间的转换流程》Long类提供了一些方法,用于在long和其他数据类型(如String)之间进行转换,本文将详细介绍如何在Java中实现Long和long之间的转换,感... 目录概述流程步骤1:将long转换为Long对象步骤2:将Longhttp://www.cppcns.c

SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程

《SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程》LiteFlow是一款专注于逻辑驱动流程编排的轻量级框架,它以组件化方式快速构建和执行业务流程,有效解耦复杂业务逻辑,下面给大... 目录一、基础概念1.1 组件(Component)1.2 规则(Rule)1.3 上下文(Conte