google map api 标注 js嵌入网页

最新推荐文章于 2024-06-21 18:13:12 发布
最新推荐文章于 2024-06-21 18:13:12 发布
阅读量872 收藏
点赞数
分类专栏： javascript 文章标签： api google function html 测试
[html] view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="content-type" content="text/html; charset=gbk" />  
  5.     <title>google地图api调用测试</title>  
  6.    
  7.     <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAj-ghS8LTgjoMmmH1AiiF8hT3eKs3v4yrH44n0d6AoJCyXz3AVBSdSQVyD1OhRWu6kT7yemhUtp_sVA" type="text/javascript"></script>  
  8.     <script type="text/javascript">  
  9.     <!--     
  10.     function load() {     
  11.       if (GBrowserIsCompatible()) {     
  12.         var map = new GMap2(document.getElementById("map"));     
  13.     
  14.         map.enableScrollWheelZoom(); // 开启鼠标滚轮放大功能     
  15.     
  16.         map.addControl(new GLargeMapControl()); // 添加一个带有可在四个方向平移、放大、缩小的按钮以及缩放滑块的控件。     
  17.         map.addControl(new GMapTypeControl());  // 添加一个地图类型的控制条（位于右上方）     
  18.         map.addControl(new GOverviewMapControl());  // 在主地图的一角创建可折叠的迷你型概览地图，以便通过拖动提供位置参考和导GOverviewMapControl 创建单像素黑边界的概览地图。注意：与其他控件不同，您只能将此控件放在地图的右下角 (G_ANCHOR_BOTTOM_RIGHT)    
  19.         // map.addControl(new GScaleControl()); // 创建显示地图比例尺的控件。     
  20.        var center = new GLatLng(28.65598488422127, 121.44621849060059);　//创建一个坐标  
  21.        var marker = new GMarker(center, {draggable:false});    //创建一个标注　并启动它的拖拽功能  
  22.        GEvent.addListener(marker, "mouseover", function () {//当鼠标经过标注时发生  
  23.        marker.openInfoWindow("<div style='font-size:9pt;'>标注位置：<span style='color:green;'><a target='_blank' href=''>台州商务网</a></span><br><span>公司地址:台州椒江景元路73-75号</span></div>");  
  24.             });  
  25.              
  26.         GEvent.addListener(marker, "dragstart", function() {     
  27.             map.closeInfoWindow();     
  28.         });     
  29.         GEvent.addListener(marker, "dragend", function() {     
  30.             var lat = marker.getLatLng().lat();     
  31.             var lng = marker.getLatLng().lng();     
  32.             marker.openInfoWindowHtml("<b>纬度：</b>" + lat + "<br/><b>经度：</b>" + lng + "<br/><b>坐标值：</b>(" + lat + ", " + lng + ")");     
  33.         });     
  34.     
  35.         map.addOverlay(marker);     
  36.     
  37.         GEvent.addListener(map, "moveend", function() {     
  38.           var center = map.getCenter();     
  39.           document.getElementById("message").innerHTML = center.toString();     
  40.         });     
  41.     
  42.         map.setCenter(center, 15);     
  43.     
  44.         window.setTimeout(function() {     
  45.           map.panTo(center);     
  46.         }, 1000);     
  47.       }     
  48.     }     
  49. // -->  
  50.     </script>  
  51.   
  52.   
  53.    
  54. </head>  
  55. <body onload="load()" onunload="GUnload()">  
  56.     <div id="map" style="width: 320px; height: 347px; margin: 0 auto 0 auto;">  
  57.     </div>  
  58.     <div style="margin: 1em auto 0 auto; text-align: center;margin: 1em auto 0 auto;text-align:center;" >  
  59.         地图中心点经纬度：<span id="message"></span></div>  
  60. </body>  
  61. </html> 

cloudday
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页内嵌Google Map搜索地图的js+css代码
09-05
网页内嵌Google Map搜索地图的js+css代码，google地图api
google地图静态下载和js调用
蓝蓝的天
10-27 2322
google地图静态下载和js调用 google staticmap使用 google地图js调用
Google Map API(JavaScript) V3.0简介
lijun_xiao2009的专栏
10-17 4132
最近在公司要做一个关于Google Map使用的分享。因为准备的时间比较仓促，所以就只准备了几个常用模块的内容。 如何开始使用Google Map API（JavaScript）？ 如何开始使用Google Map API（JavaScript） V3.0 Google Map的使用非常方便，只需要有一个Google的账号，就可以在https://code.google.co
JS - Google map API
howlowl
05-23 863
Step one html added: <style> #hplus-map { width: 100%; height: 400px; } </style> <div id="hplus-map"></div> <script src="https://maps.googleapis.com/maps/api/js?k...
基于Google Map Api的Android导航应用
01-19
一、引言 ...　本文提出并实现了一种基于Google Map Api 的Android 导航应用，能够给用户提供人性化和智能化的地图导航服务。 　二、系统体系结构 图1 系统体系结构 　三、UI 界面设计 　Android 应
Google-Map-Api.rar_google map_google map api
09-24
介绍Google Map Api的文档，其中对Google Map编程中使用的部分API接口进行了说明。
Google Map API更新实现用户自定义标注坐标
12-12
代码如下:if(typeof GoogleMap === ‘undefined’){ var GoogleMap = {}; } (function(){ if (!document.getElementById(“fgmap”)) { return false; } else { // 是否可创建Google地图控件 var isCompatible = new...
谷歌地图Google Map API V3中文开发文档
04-20
谷歌地图 Google Map API V3 是一个基于 JavaScript 的 API，允许开发者在自己的网站或应用程序中嵌入谷歌地图。该 API 提供了一个强大的地图引擎，支持多种类型的地图、标记、路线规划、地标显示等功能。 在谷歌...
HTML(9)——字体修饰
m0_74386799的博客
06-19 727
如果一组当中两个数是一样的，可以简写为一位数：例如#00ffcc简写为#0fc。font-family属性值可以书写多个字体名用逗号隔开，依次从左到右查找。单行文字想要垂直居中时，可以设置行高属性值与盒子高度属性值一致。想让图片居中，可以给图片加一个父级标签例如<div>设置居中。属性的简写方式，一个属性对应多个值的写法，各个属性值之间用。测量方法：从一行文字的最顶端到下一行文字的最顶端。属性名：text-decoration。属性名：text-indent。属性名：text-align。
HTML播放flv
jaket5219999的博客
06-20 259
【代码】HTML播放flv。
Web数据提取：Python中BeautifulSoup与htmltab的结合使用
Z_suger7的博客
06-17 915
BeautifulSoup是一个用于解析HTML和XML文档的Python库。它能够将复杂的HTML文档转换成易于使用的Python对象，从而可以方便地提取网页中的各种数据。易于使用：提供了简单直观的API来查找、修改和操作解析树中的元素。强大的搜索功能：支持多种搜索方法，如通过标签名、类名、ID等快速定位元素。灵活的解析器支持：可以与Python标准库中的HTML解析器或第三方解析器如lxml配合使用。htmltab是一个专门用于从HTML中提取表格数据的Python库。
HTML静态网页成品作业(HTML+CSS)——新媒体专业介绍介绍网页(1个页面)
weixin_42283461的博客
06-18 305
HTML静态网页成品作业(HTML+CSS)——新媒体专业介绍介绍网页(1个页面)
【html】用html5+css3+JavaScript制作一个计数器
weixin_56334307的博客
06-17 496
文件，你应该就能看到一个简单的计数器，每次点击按钮时，计数就会加一。将这三个文件放在同一个文件夹中，并在浏览器中打开。
HTML总结
m0_47449012的博客
06-19 801
链接样式表的基本语法： <link rel="stylesheet" href="URL">。<meta http-equiv="refresh" content="30" url="网址参数"> 用于规定页面刷新时间为30s。<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>、<table>、<form>等。<a>、<img>、<input>、<span>、<strong>、<button>等。<meta name="author" content="信息参数"> 用于描述网页作者。
html做一个画柱形图的软件
weixin_47634487的博客
06-20 894
你可以使用 HTML、CSS 和 JavaScript 创建一个简单的柱形图绘制软件。为了方便起见，我们可以使用一个流行的 JavaScript 图表库，比如 Chart.js，它能够简化创建和操作图表的过程。以下是一个完整的示例，展示如何使用 HTML 和 Chart.js 创建一个柱形图绘制工具。
Html集成 vue3,js文件访问vue内的方法和属性
最新发布
qq_44871531的博客
06-21 231
1.我们首先需要把 let vm = app.mount(‘#app’);的vm传到js文件中,这样才能访问vue中定义的元素和函数。如下代码,假设index.js文件中有个 getUserInfo函数,2.vue中定义的函数需要return出去才能在js文件中调用。3.js文件中,调用vue中的函数作为参数即可传参到vue中。
HTML(7)——无语义的布局标签和字符实体
m0_74386799的博客
06-18 254
作用：布局网页（划分网页区域，摆放内容）div：独占一行span：不换行。
HTML中的＜iframe＞标签及其属性
一起coding，一起嗨。
06-18 878
HTML中的标签及其属性
HTML 全局属性介绍及示例
一起coding，一起嗨。
06-17 522
HTML 全局属性介绍及示例
googlemap api v3
08-18
Google Map API V3是一种用于在Web应用程序中嵌入和操作Google地图的编程接口。它提供了一组丰富的功能和工具，可以帮助开发者在自己的网站或应用中实现地图和位置相关功能。 使用Google Map API V3，开发者可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值