Google 地图的“Hello, World”

最新推荐文章于 2024-04-23 22:51:23 发布
最新推荐文章于 2024-04-23 22:51:23 发布
阅读量1k 收藏
点赞数
分类专栏： Google地图 文章标签： google gmail function div 浏览器 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/swort_177/article/details/5029897
版权

 Google 地图的HELLO WORLD

 


<html>
  <head>
 
 
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=

abcdefg

&sensor=true"
            type="text/javascript"></script>
    <script type="text/javascript">
 
    function initi()

{
      if (GBrowserIsCompatible())

{
        var map = new GMap2(document.getElementById("googlemap"));
        map.setCenter(new GLatLng(30.65, 104.08), 14);
      }
    }
 
    </script>
  </head>
  <body οnlοad="initi()" οnunlοad="GUnload()">
    <div id="googlemap" style="width: 800px; height: 600px"></div>
  </body>
</html>

 

hello world 简单明了  首先导入类库，检测浏览器兼容否，使用类库中的最最主要的类Gmap2建立一个地图，然后设置了地图的中心店和缩放级别。
GLatLng 表示的是一个地理位置。在body的ONLOAD进行了加载地图。onunload进行了必要的卸载（防止内存泄露）。

1 导入类库的时候的KEY=abcdef.表示密钥，这个需要自己使用GMAIL进行注册下，其他的邮箱好像不行。在本地测试不是必要的。另外密钥注册的时候对应着一个域名。
   发布后只能在这个域名下使用。并且一天（24小时）最大的请求次数是15000次。
2 地理位置是一个经纬度。注意先表示纬度，在表示经度。（纬度，经度）
3 缩放级别是从0-19的，0显示的是整个地球。19表示最大的倍数。
4 防止地图的DIV的ID和SYYLE是必须的。

 

swort_177
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Google_Map_API谷歌地图
03-30
基础知识 正向标注 反向标注 任意多边形 自定义GMarker 地图控件与地图属性 空间数据类型 ...Google 地图的“Hello, World” 加载 Google 地图 API 地图 DOM 元素 GMap2 - 基本对象 初始化地图 加载地图
Cesium特效-2021年汇总
wzwxwc1987的专栏
05-30 2343
2021年使用cesium开发的一些效果 2-垂直发光飞线 3-发光扩散圆 4-立体扩散圆柱 5-平面流动发光线 6-地理围栏的4种效果
Cesium绘制矩形并添加动态围墙效果
XFIRR的博客
10-02 603
我设置50的原因是发现大部分时候绘制的区域范围并不会太大或太小，但是这仅仅是一种折中的解决办法。面积如果很小，围墙就会很高。如果想绘制多个围墙但是不清除之前的可能就得自行研究一下了，最开始的时候也是可以实现的，只是我觉得GIS中似乎很难在一个上绘制那么多的区域，所以就把这个功能去掉了。)，那么只需要将几何体实例的最低生成高程设置为当前所选范围的的最低高程，最大高度设置为比最大高程高一些，就不会再出现遮盖的问题。代码中绘制的部分是参考了网上的其它代码的，我就不做过多赘述。
cesium 绘制栅栏
大家好，我是 ed.
06-06 1243
网上的资料要不收费，要不代码不全，很多跟绘制墙体有关的案例要不缺放法要不干嘛的，我自己根据网上的方法又加上自己百度改，最后实现了一个效果，和我想实现的效果差不多，分享一下子。...
Google Maps API Hello World示例
一名可爱的技术搬运工
05-23 146
一个简单的hello world指南，可通过Google Maps Javascript API v3在网页上显示Google Maps。 在本教程中，我们向您展示如何显示以“马来西亚Malim Nawar”（我的家乡）为中心的地图，以及如何使用“标记（小图标）”来标识地图上的位置。 完整的例子…… <html> <head> <title>Goo...
Cesium 实现光围栏效果
jiegiser博客
12-15 2015
文章目录功能介绍效果截图 功能介绍 该例子主要通过自定义 shader 实现 od 线展示的效果；用于展示轨迹交通线、物流线等； 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型（√） geoserver 结合实现属性查询（√） geoserver 结合实现空间查询（√） 地下模式（√） 单体化 / 倾斜模型分户单体化（√） 缓冲区分析（√） 粒子特效 视频融合（√） Cesium 点聚合（√） 点线面编辑 多视角轨迹回放（√） 可视域分析（√
google map api地图
10-14
亲自测试ok，下载下来直接点击 helloworld.html 即可。其他若无法访问，在div 加上 样式即可。简单易上手;top:30px"></div>
HelloWorld:带有 Google Map 和 Google Cloud Messaging 的基本 Android 应用程序
07-01
你好世界谷歌地图这是在 Android 应用程序中集成 Google Map 和 Google Cloud Messaging 的一个非常基本的实现。 通过这个应用程序，用户可以将设备位置发送到服务器 (server.py) 并接收基于位置的通知。
Google地图Api教程
05-16
任何 Google 地图 API 应用程序中的基础元素都是...Google 地图的“Hello, World” 开始学习 Google 地图 API 最简单的方式是看一个简单的示例。下面的网页显示以北京的故宫博物院为中心的 500x300 的地图。 。。。
hello-world:只是开始项目的存储库和跟踪进度的方法
05-09
你好，世界只是开始项目的存储库和跟踪进度的方法＃文件夹：Euler项目-一次一步地完成Euler的工作Javascript-使用JS播放Google API-使用经/纬度找出地图Ruby-学习Ruby
Google Maps 第 3 版的“Hello, World”
Web前端开发
06-25 527
初步了解 Google Maps API 的最简单方法就是看一个简单的示例。以下网页显示了以中国衡水为中心的一个地图： name="viewport" content="initial-scale=1.0, user-scalable=no" /> type="text/css">   html { height: 100% }   body { height: 100%; mar
Cesium圆形、规则多边形动态围墙
xt3d的博客
11-22 1891
Cesium圆形、规则多边形动态围墙实现效果 实现效果 详情参见 Cesium实战专栏
地理地图/游戏地图与openGL
ShareUs的专栏
06-29 4069
-- 问题： OpenGL绘制三维地形图,地理地图; 基于OpenGL的地图渲染引擎设计与实现; OpenGL制作游戏的小地图; openGL将二维卫星地图渲染成三维地形图 ; Opengl绘制地图,OpenGL实现地图编辑器，制作简易地图; OpenGL渲染地理路线 建筑物等。 路线 建筑物等的坐标或经纬度数据？ > 地图与Opengl 使用opengles绘制灰度地形图- ...
给定坐标点，判断是否在某区域范围内 地理围栏算法
热门推荐
尼乐
12-09 4万+
地图平台：leaflet 语言：js index.html Leaflet 快速开始指南示例 var map = L.map('map').setView([24, 110], 5); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{
加载谷歌地图API的URL详细解读
swort_177的专栏
12-18 4046
原文地址 http://hi.baidu.com/clive%5Fstudio/blog/item/13e57932a5e6474aad4b5fa4.html  谷歌地图的API类库是通过script标签导入的，形式如下：      http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcdefg" type="text/jav
准备学习下GOOGLE地图
swort_177的专栏
12-17 1020
想学习下GOOGLE地图，一方面想把公司的厅点图利用GOOGLE地图标示出来，另一方面就当是充实自己吧。 先复习下经纬度的知识      经度和纬度都是一种角度。经度是个两面角，是两个经线平面的夹角。因所有经线都是一样长，为了度量经度选取一个起点面，经1884年国际会议协商，决定以通过英国伦敦近郊、泰晤士河南岸的格林尼治皇家天文台（旧址）的一台主要子午仪十字丝的那条经线为起始经线，
google map系列教程的地址
swort_177的专栏
12-18 771
看了篇教程，写的浅显易懂，有些专业知识还是需要了解下的，这个对于学习GOOGLE MAP还是很有帮助的，内容很多，就放个链接吧。 这是第2次做了，第一次写完没保存直接提交了，结果提示提交失败。MY GOD。血的教训啊！Google Map开发系列（一）——谷歌地图API密钥（API Key）的解读和使用技巧Google Map开发系列（二）——使用谷歌地图API之前应该有所了解的一些技
Selenium一本通
最新发布
媛媛
04-23 1099
wd.quit()
vue3谷歌地图打点
03-14
Vue 3是一种流行的JavaScript框架，用于构建用户界面。谷歌地图是一种强大的地图服务，可以在网页上显示地图，并提供各种地图相关的功能。在Vue 3中使用谷歌地图进行打点可以通过以下步骤实现： 1. 首先，你需要在你的Vue项目中引入谷歌地图的JavaScript API。你可以在谷歌地图开发者平台申请一个API密钥，并将其添加到你的项目中。 2. 在Vue组件中，你可以使用`<script>`标签引入谷歌地图的API脚本，并在`mounted`生命周期钩子函数中初始化地图。 ```javascript <template> <div id="map"></div> </template> <script> export default { mounted() { // 初始化地图 const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 37.7749, lng: -122.4194 }, // 设置地图中心点的经纬度 zoom: 12 // 设置地图缩放级别 }); // 在地图上添加标记点 const marker = new google.maps.Marker({ position: { lat: 37.7749, lng: -122.4194 }, // 设置标记点的经纬度 map: map, // 将标记点添加到地图上 title: "Hello World!" // 设置标记点的标题 }); } }; </script> ``` 在上面的代码中，我们首先在`<template>`标签中定义了一个`<div>`元素，用于显示地图。然后，在`<script>`标签中，我们在`mounted`生命周期钩子函数中初始化了地图，并在地图上添加了一个标记点。 请注意，上述代码中的经纬度和标题只是示例，你可以根据实际需求进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值