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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智慧校园|智慧校园管理小程序|基于微信小程序的智慧校园管理系统设计与实现(源码+数据库+文档)

智慧校园管理小程序目录 目录 基于微信小程序的智慧校园管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、微信小程序前台 2、管理员后台 &#xff08;1&#xff09;学生信息管理 &#xff08;2&#xff09; 作业信息管理 &#xff08;3&#xff09;公告…

蓝桥杯算法赛 第 6 场 小白入门赛 解题报告 | 珂学家 | 简单场 + 元宵节日快乐

前言 整体评价 因为适逢元宵节&#xff0c;所以这场以娱乐为主。 A. 元宵节快乐 题型: 签到 节日快乐&#xff0c;出题人也说出来自己的心愿, 祝大家AK快乐! import java.util.Scanner;public class Main {public static void main(String[] args) {System.out.println(&qu…

栈和堆什么意思,Rust所有权机制又是什么

栈和堆什么意思 栈&#xff1a;存储基本数据类型和引用数据类型的指针引用(地址)&#xff0c;基本数据类型占据固定大小的内存空间。 堆&#xff1a;存储引用数据类型的值&#xff0c;引用数据类型包括对象&#xff0c;数组和函数&#xff0c;在堆中&#xff0c;引用数据类型…

AI论文速读 | 【综述】(LLM4TS)大语言模型用于时间序列

题目&#xff1a;Large Language Models for Time Series: A Survey 作者&#xff1a;Xiyuan Zhang , Ranak Roy Chowdhury , Rajesh K. Gupta and Jingbo Shang 机构&#xff1a;加州大学圣地亚哥分校&#xff08;UCSD&#xff09; 网址&#xff1a;https://arxiv.org/abs/…

JAVA工程师面试专题-《Redis》篇

目录 一、基础 1、Redis 是什么 2、说一下你对redis的理解 3、Redis 为什么这么快&#xff1f; 4、项目中如何使用缓存&#xff1f; 5、为什么使用缓存&#xff1f; 6、Redis key 和value 可以存储最大值分别多是多少&#xff1f; 7、Redis和memcache有什么区别&#xf…

Folx Pro Mac中文p破解版如何使用?为您带来Folx Pro 详细使用教程!

​ Folx pro 5 中文版是mac上一款功能强大的老牌加速下载软件&#xff0c;新版本的Folx pro整体界面非常的简洁和漂亮&#xff0c;具有非常好用的分类管理功能&#xff0c;支持高速下载、定时下载、速度控制、iTunes集成等功能。Folx pro兼容主流的浏览器&#xff0c;不但可以下…

libigl 网格harmonic参数化

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 网格的Harmonic参数化是一种常用的参数化方法,用于将三角形网格映射到二维平面上。Harmonic参数化的基本思想是利用调和函数在网格上的性质,将网格上的每个顶点映射到平面上的一个点,并保持一定的形状性质。 具体…

【深度学习笔记】3_10 多层感知机的PyTorch实现

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 3.10 多层感知机的简洁实现 下面我们使用PyTorch来实现上一节中的多层感知机。首先导入所需的包或模块。 import torch from torch import nn from torch.nn import …

开源世界的学术问题

自由软件基金会是1983年成立的&#xff0c;到现在是41年。正好很有意思的是&#xff0c;在去年还有一篇文章&#xff08;CSDN 的翻译&#xff09;&#xff0c;专门在质疑说成立 40 年的自由软件基金会是不是已经快不行了&#xff0c;所以我们会用这个标题叫做兴衰发展历程来介绍…

Excel的中高级用法

单元格格式&#xff0c;根据数值的正负分配不同的颜色和↑ ↓ 根据数值正负分配颜色 2-7 [蓝色]#,##0;[红色]-#,##0 分配颜色的基础上&#xff0c;根据正负加↑和↓ 2↑-7↓ 其实就是在上面颜色的代码基础上加个 向上的符号↑&#xff0c;或向下的符号↓ [蓝色]#,##0↑;[红色…

Android中抽象类与接口的区别?Activity与Fragment之间的通信方式有哪些?

目录 抽象类与接口的区别&#xff1f; Activity与Fragment之间的通信方式有哪些&#xff1f; 抽象类与接口的区别&#xff1f; 抽象类和接口在Java和Android开发中都是用来实现多态和代码复用的机制&#xff0c;但它们有一些关键的区别&#xff1a; 定义和使用方式&#xff…

Spring Cloud OpenFeign官方文档学习

文章目录 推荐一、OpenFeign简介二、Springboot集成OpenFeign1、引入starter2、在启动类或者配置类上加EnableFeignClients注解&#xff1a;3、声明Feign接口4、EnableFeignClients属性解析5、FeignClient属性解析 三、覆盖默认配置1、覆盖默认配置2、配置列表3、使用配置文件进…

leetcode-100224.分割数组

100224. 分割数组 给你一个长度为 偶数 的整数数组 nums 。你需要将这个数组分割成 nums1 和 nums2 两部分&#xff0c;要求&#xff1a; nums1.length nums2.length nums.length / 2 。nums1 应包含 互不相同 的元素。nums2也应包含 互不相同 的元素。 如果能够分割数组就…

uni-app vue3 setup nvue中webview层级覆盖问题

核心就是这两行&#xff0c;&#x1f923;发现设置后不能点击了&#xff0c;这个玩意可能只能弹窗打开的时候动态的修改 position: static, zindex: 0onLoad(options > {loadWebview()})function loadWebview() {let pageInfo uni.getSystemInfoSync();width.value pageI…

ROS 2的前世今生 | ROS 2学习笔记

自2015年底首次踏入ROS&#xff08;Robot Operating System&#xff09;的世界以来&#xff0c;我在机器人领域的旅程已近九年。这段历程始于团队几位志同道合的朋友在业余时间的自发学习&#xff0c;逐渐演变成成立了一个致力于英特尔硬件平台与ROS框架集成优化的专业团队&…

力扣--动态规划1014.最佳观光组合

思路分析: 初始化左侧景点的评分为第一个景点的评分&#xff0c;最终结果为0。从第二个景点开始遍历数组。对于每个景点&#xff0c;计算当前观光组合的得分&#xff0c;即当前景点的评分 左侧景点的评分 - 两者之间的距离。更新最终结果为当前得分和之前结果的较大值。更新左…

matlab simulink变压器温度仿真

1、内容简介 略 48-可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 matlab simulink变压器温度仿真_哔哩哔哩_bilibili 4、参考论文 略 大型油浸风冷变压器绕组温度场分析_高原 基于顶层油温的变压器绕组热点温度计算改进模型_陈伟根 基于热电类比理论的油浸式电…

Python及Pycharm专业版下载安装教程(Python 3.11版)附JetBrains学生认证教程

目录 一、Python下载及安装1、Python下载2、Python安装3、验证是否安装成功 二、PyCharm下载及安装1、PyCharm下载2、PyCharm安装3、激活PyCharm 三、JetBrains学生认证 本篇主要介绍Python和PyCharm专业版的下载及安装方式&#xff0c;以及通过两种方式进行JetBrains学生认证。…

Python各版本和Jit加速模块非正式性能测试

最近看到一篇博客&#xff0c;说python3.11比之前的版本有性能升级 https://www.blog.dailydoseofds.com/p/performance-comparison-of-python 于是我也用斐波那契的例子测试了一下其他几个Jit加速方案&#xff0c;场景有限&#xff0c;仅供参考。 测试环境Centos 7.9 Inte…

基于ZYNQ的PCIE高速数据采集卡的设计(五)上位机软件设计

4.4 上位机软件设计 上位机主要完成数据的接收和保存文件等功能。由于采集卡是一种 PCIE 设备&#xff0c; 需要一种 PCIE 设备的驱动程序为基础进行开发。本设计选择 WinDriver 开发工具来 生成 PCIE 设备驱动和函数库&#xff0c;并基于该驱动在 Visual Studio(…