Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >google地图简单示例

google地图简单示例

作者头像
liulun
发布于 2022-05-09 03:16:26
发布于 2022-05-09 03:16:26
46500
代码可运行
举报
文章被收录于专栏:liulunliulun
运行总次数:0
代码可运行

要先获取Google地图的API 密钥:http://code.google.com/intl/zh-CN/apis/maps/signup.html

Google提供的开发文档很多

我的代码如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAfhiBJ2VvezGxWN5QTnJF1hRiMmuTicfa9ZYrooSj9awNojOYohQ2gsd6YmWEocGuZPza89ghBvNpWw" type="text/javascript"></script>
<script type="text/javascript">    
function initialize() {      
if (GBrowserIsCompatible()) {        
        var map = new GMap2(document.getElementById("map_canvas"));  
        map.setMapType(G_SATELLITE_MAP);
        var point = new GLatLng(30.27697,120.127296);
        map.setCenter(point, 17); 
        var marker = new GMarker(point);
        GEvent.addListener(marker,"click", function() {
            map.openInfoWindow(point,"<b>东方通信大厦!<br />我就在这上班</b>");
          });
        map.addOverlay(marker);
    }
}    
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2009-11-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
在网站中加入google地图显示公司位置
前几天出去谈了一个网站修改的需求,需求中客户提到要再网站上加上一个地图,显示公司所在位置,问能不能做。当时想了一瞬,答道:能,不过需要研究一下,这个东西比较复杂。(谈需求嘛,不能说这个东西简单的很,那样谁还给钱)
the5fire
2019/02/28
1.2K0
google maps api_js调用谷歌浏览器接口
1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点:
全栈程序员站长
2022/09/20
6K0
页面中插入百度地图(使用百度地图API)
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”插入地图.aspx.cs” Inherits=”插入地图” %>
全栈程序员站长
2022/07/06
7730
页面中插入百度地图(使用百度地图API)
Google MAP API 初步尝试
今天看了一下午Google的API,发现还挺简单的。稍微懂点Javascript就可以了。 写了个小例子
EltonZheng
2021/01/26
1.7K0
第151天:网页中插入百度地图方法(不需要密钥)
 以上就是网页中插入百度地图的方法,做企业站,总是要插入百度地图,以后再也不用愁了。
半指温柔乐
2018/09/11
5.2K0
第151天:网页中插入百度地图方法(不需要密钥)
百度API的经历,怎样为多个点添加带检索功能的信息窗口
不管我们要做什么样的效果,APIKey(密钥)都是不可缺少的要件,所以我们需要先去百度申请我们的APIKey!!!
Yiiven
2022/12/15
1.3K0
百度地图api根据坐标搜索附近信息_最简单app制作
  这几天比较空闲,就接触了下百度地图的API(开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的。只要简单几步注册下,就可以获得一个Key,就能直接调用(PS:好像1.3版本前的无需注册获取key,就能直接调用api)。   想着能结合到自己的项目中去,那也挺不错的。看了园子中的几篇文章,感觉甚好,想自己也动手试试。 在调用百度地图API的时候,经纬度的获取必然是关键,那么怎么样获取到经纬度的值呢?这是一个最首要解决的问题。 通过查询资料,看了几个例子,得知了调用的方法(感谢与时俱进的实例,给予很大的帮助)。站着巨人的肩膀上,就能比较快的实现功能。   闲话不多,下面就直接给大家介绍下,具体要怎么调用百度地图API。   首先新建一张html页面。然后引用上API:
全栈程序员站长
2022/09/20
9940
百度地图api根据坐标搜索附近信息_最简单app制作
百度地图API显示多个标注点带百度样式信息检索窗口的代码
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/113841.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/07
6110
百度地图 路书动态加载规划
<html lang="en"> <head> <meta charset="utf-8"/> <title>路书</title> <style type="text/css"> body, html { width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; } #map_ca
拿我格子衫来
2022/01/24
4570
百度地图 路书动态加载规划
GoogleMaps api for javascript demo 动态按顺序加载marker
@{ } <!DOCTYPE html> <html lang="zh"> <head> <meta name="viewport" content="initi
阿新
2018/04/12
8460
百度地图设置显示公司地址
在百度地图开放平台(http://lbsyun.baidu.com/)登录账号新建应用,应用类型选择浏览器端,建立完成后我们会得到应用AK。
泽泽社长
2023/04/17
8360
百度地图设置显示公司地址
批量获取百度地图中的县级以上行政区域的边界数据
最近在做一个演示DEMO的时候,需要省界和市一级界线的数据。以前自己是有这样的SHP数据的,然而现在由于行政区划更新很快,而自己之前下的数据还是2010年版本的国家基础数据。
sparkexpert
2022/05/07
8840
批量获取百度地图中的县级以上行政区域的边界数据
JQuery实现坐标拾取和地址模糊查询
本文详细讲解了如何使用 JQuery+HTML+JavaScript 实现移动端页面中的地图位置选取功能。本文逐步展示了如何构建基本的地图页面,如何通过点击地图获取经纬度和地理信息,以及如何实现模糊查询地址并在地图上标注。最后,提供了完整的代码示例,并总结了基于地图API进行地图位置选点的开发过程,帮助开发者快速上手并应用到实际项目中。
Damon小智
2024/08/11
1500
JQuery实现坐标拾取和地址模糊查询
百度地图API开发指南(二)
除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同,那么控件可能会重叠在一起,这时就可以通过偏移值使二者分开显示。
幽鸿
2020/04/01
1.8K0
百度地图API开发指南(二)
地图的折腾
一个纯后台人员折腾前端,最近有个地图的小需求。然后去折腾了一把百度地图。其中一个要求就是在地图按数字标注目标位置。
BUG弄潮儿
2021/09/10
7340
地图的折腾
高质量编码-克里金插值地图可视化(前端代码)
使用$.parseJSON将result反序列化为JSON对象,表示包含经纬度坐标的全国空气站点信息的数组。
MiaoGIS
2021/07/16
1K0
高质量编码-克里金插值地图可视化(前端代码)
百度地图API-创建多个坐标,连线,信息提示
这是一个多坐标创建,并连线,和信息显示的例子 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html, #allm
用户1149182
2020/06/19
1.9K0
百度地图API-创建多个坐标,连线,信息提示
高质量编码-克里金插值地图可视化(后台缓存优化)
实际在web页面中根据真实数据即时运行上面三个步骤的计算,因为模型训练涉及到的数学计算量很大,可能需要很长时间才能得到结果,前端javascript耗时统计如下:
MiaoGIS
2021/08/20
1.8K0
高质量编码-克里金插值地图可视化(后台缓存优化)
百度地图API的使用示例
刚刚工作的时候写过百度地图API文档,那时候没有记录到技术博客里面,今天在群里看见有个姑娘在问这个问题,重温了一遍,这个API还算好用。百度地图API,集成简单好用,全面,兼容问题,文档全面;
王小婷
2018/08/10
1.3K0
百度地图API的使用示例
10分钟动手制作一个疫情小区防疫地图
最近有几个小程序可以查询你周边小区新型冠状病毒的确诊人数情况,通过这个小程序你可以看到你周围疫情的情况,具体如下图所示:
博文视点Broadview
2020/06/12
1.7K0
10分钟动手制作一个疫情小区防疫地图
推荐阅读
相关推荐
在网站中加入google地图显示公司位置
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验