使用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

相关文章

Linux使用fdisk进行磁盘的相关操作

《Linux使用fdisk进行磁盘的相关操作》fdisk命令是Linux中用于管理磁盘分区的强大文本实用程序,这篇文章主要为大家详细介绍了如何使用fdisk进行磁盘的相关操作,需要的可以了解下... 目录简介基本语法示例用法列出所有分区查看指定磁盘的区分管理指定的磁盘进入交互式模式创建一个新的分区删除一个存

C#使用HttpClient进行Post请求出现超时问题的解决及优化

《C#使用HttpClient进行Post请求出现超时问题的解决及优化》最近我的控制台程序发现有时候总是出现请求超时等问题,通常好几分钟最多只有3-4个请求,在使用apipost发现并发10个5分钟也... 目录优化结论单例HttpClient连接池耗尽和并发并发异步最终优化后优化结论我直接上优化结论吧,

Window Server2016加入AD域的方法步骤

《WindowServer2016加入AD域的方法步骤》:本文主要介绍WindowServer2016加入AD域的方法步骤,包括配置DNS、检测ping通、更改计算机域、输入账号密码、重启服务... 目录一、 准备条件二、配置ServerB加入ServerA的AD域(test.ly)三、查看加入AD域后的变

Window Server2016 AD域的创建的方法步骤

《WindowServer2016AD域的创建的方法步骤》本文主要介绍了WindowServer2016AD域的创建的方法步骤,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、准备条件二、在ServerA服务器中常见AD域管理器:三、创建AD域,域地址为“test.ly”

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端:安装nfs-utils2、服务端:创建共享目录3、服

SpringBoot使用Apache Tika检测敏感信息

《SpringBoot使用ApacheTika检测敏感信息》ApacheTika是一个功能强大的内容分析工具,它能够从多种文件格式中提取文本、元数据以及其他结构化信息,下面我们来看看如何使用Ap... 目录Tika 主要特性1. 多格式支持2. 自动文件类型检测3. 文本和元数据提取4. 支持 OCR(光学

Java内存泄漏问题的排查、优化与最佳实践

《Java内存泄漏问题的排查、优化与最佳实践》在Java开发中,内存泄漏是一个常见且令人头疼的问题,内存泄漏指的是程序在运行过程中,已经不再使用的对象没有被及时释放,从而导致内存占用不断增加,最终... 目录引言1. 什么是内存泄漏?常见的内存泄漏情况2. 如何排查 Java 中的内存泄漏?2.1 使用 J

JAVA系统中Spring Boot应用程序的配置文件application.yml使用详解

《JAVA系统中SpringBoot应用程序的配置文件application.yml使用详解》:本文主要介绍JAVA系统中SpringBoot应用程序的配置文件application.yml的... 目录文件路径文件内容解释1. Server 配置2. Spring 配置3. Logging 配置4. Ma

Linux使用dd命令来复制和转换数据的操作方法

《Linux使用dd命令来复制和转换数据的操作方法》Linux中的dd命令是一个功能强大的数据复制和转换实用程序,它以较低级别运行,通常用于创建可启动的USB驱动器、克隆磁盘和生成随机数据等任务,本文... 目录简介功能和能力语法常用选项示例用法基础用法创建可启动www.chinasem.cn的 USB 驱动

Java 字符数组转字符串的常用方法

《Java字符数组转字符串的常用方法》文章总结了在Java中将字符数组转换为字符串的几种常用方法,包括使用String构造函数、String.valueOf()方法、StringBuilder以及A... 目录1. 使用String构造函数1.1 基本转换方法1.2 注意事项2. 使用String.valu