使用Google Maps JavaScript API的步骤

2024-02-26 17:36

本文主要是介绍使用Google Maps JavaScript API的步骤,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

2010年的时候google还没有被封,web地图开发还在使用google map。当时总结了它的使用步骤。
简单例子
    第一步:
    去http://www.google.com/apis/maps/signup.html 申请一个KeyID

    第二步:
    在HTML的<title></title>之间加上对MapAPI函数库的引用,
    <script src="http://maps.google.com/maps?file=api&v=2&key= YourKeyID" type="text/javascript"></script>

    第三步:
    在HTML的<body></body>之间的任意位置加上一个名为map的DIV,
    <div id="map" style="width: 700px; height: 560px" align="center"></div>

    第四步:
    在名为map的DIV后面,加上GMap类的实例,
        <script. type="text/javascript"> 
        //创建GMap类的实例
        var map = new GMap(document.getElementById("map"));
        //添加一个控制条
        map.addControl(new GSmallMapControl());
        //设置显示模式为卫星影像
        map.setMapType(G_SATELLITE_TYPE);
        //设置中心点经纬度(上海)和缩放系数,并显示
        map.centerAndZoom(new GPoint(121.4838, 31.2517), 4);
        </script>

    第五步:
    随机增加10个标记点,
    var bounds = map.getBoundsLatLng();
    var width = bounds.maxX - bounds.minX;
    var height = bounds.maxY - bounds.minY;
    for (var i = 0; i < 10; i++) {
        var point = new GPoint(bounds.minX + width * Math.random(),
                 bounds.minY + height * Math.random());
        var marker = createMarker(point, i + 1);
        //添加标记点
        map.addOverlay(marker);
   }

    第六步:
    添加事件响应,
        function createMarker(point, number)
        {
           var marker = new GMarker(point);

           // Show this marker's index in the info window when it is clicked.
           var html = "Marker #<b>" + number + "</b>";
           GEvent.addListener(marker, 'click', function() {
           marker.openInfoWindowHtml(html);});

           return marker;
         }

这篇关于使用Google Maps JavaScript API的步骤的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/749632

相关文章

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be

Spring Boot 3.x 中 WebClient 示例详解析

《SpringBoot3.x中WebClient示例详解析》SpringBoot3.x中WebClient是响应式HTTP客户端,替代RestTemplate,支持异步非阻塞请求,涵盖GET... 目录Spring Boot 3.x 中 WebClient 全面详解及示例1. WebClient 简介2.

Java中使用 @Builder 注解的简单示例

《Java中使用@Builder注解的简单示例》@Builder简化构建但存在复杂性,需配合其他注解,导致可变性、抽象类型处理难题,链式编程非最佳实践,适合长期对象,避免与@Data混用,改用@G... 目录一、案例二、不足之处大多数同学使用 @Builder 无非就是为了链式编程,然而 @Builder

在IntelliJ IDEA中高效运行与调试Spring Boot项目的实战步骤

《在IntelliJIDEA中高效运行与调试SpringBoot项目的实战步骤》本章详解SpringBoot项目导入IntelliJIDEA的流程,教授运行与调试技巧,包括断点设置与变量查看,奠定... 目录引言:为良驹配上好鞍一、为何选择IntelliJ IDEA?二、实战:导入并运行你的第一个项目步骤1

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

Spring Boot从main方法到内嵌Tomcat的全过程(自动化流程)

《SpringBoot从main方法到内嵌Tomcat的全过程(自动化流程)》SpringBoot启动始于main方法,创建SpringApplication实例,初始化上下文,准备环境,刷新容器并... 目录1. 入口:main方法2. SpringApplication初始化2.1 构造阶段3. 运行阶

mybatis-plus QueryWrapper中or,and的使用及说明

《mybatis-plusQueryWrapper中or,and的使用及说明》使用MyBatisPlusQueryWrapper时,因同时添加角色权限固定条件和多字段模糊查询导致数据异常展示,排查发... 目录QueryWrapper中or,and使用列表中还要同时模糊查询多个字段经过排查这就导致只要whe

Spring Boot3.0新特性全面解析与应用实战

《SpringBoot3.0新特性全面解析与应用实战》SpringBoot3.0作为Spring生态系统的一个重要里程碑,带来了众多令人兴奋的新特性和改进,本文将深入解析SpringBoot3.0的... 目录核心变化概览Java版本要求提升迁移至Jakarta EE重要新特性详解1. Native Ima

Java中的xxl-job调度器线程池工作机制

《Java中的xxl-job调度器线程池工作机制》xxl-job通过快慢线程池分离短时与长时任务,动态降级超时任务至慢池,结合异步触发和资源隔离机制,提升高频调度的性能与稳定性,支撑高并发场景下的可靠... 目录⚙️ 一、调度器线程池的核心设计 二、线程池的工作流程 三、线程池配置参数与优化 四、总结:线程

Spring Boot 与微服务入门实战详细总结

《SpringBoot与微服务入门实战详细总结》本文讲解SpringBoot框架的核心特性如快速构建、自动配置、零XML与微服务架构的定义、演进及优缺点,涵盖开发环境准备和HelloWorld实战... 目录一、Spring Boot 核心概述二、微服务架构详解1. 微服务的定义与演进2. 微服务的优缺点三