javascript 调用谷歌地图API 输入地址 点击弹出悬浮信息

最新推荐文章于 2021-06-10 00:00:08 发布
最新推荐文章于 2021-06-10 00:00:08 发布
阅读量5.7k 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript api function animation textbox query
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ysdaniel/article/details/8018064
版权

 上面是执行结果，下面是代码。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <script type="text/javascript"  
        src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>  
    <script type="text/javascript">  
        var geocoder;  
        var map;  
        //实际查询地址  
        //var query = "辽宁沈阳文化路三号巷11号";  
        //var query = "东北大学北门";  
        //显示名称  
        //var display = "<b>单位: </b>东北大学";  
        function initialize() {  
            geocoder = new google.maps.Geocoder();  
            var myOptions = {  
                zoom : 17,//缩放比例  
                //地图类型 •MapTypeId.ROADMAP •MapTypeId.
最低0.47元/天 解锁文章
ysdaniel
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS使用google地图API完成一个完整地图应用
andrewleeeeee的专栏
10-23 5988
function getMyLocation() { if (navigator.geolocation)   //navigator.geolocation属性包含整个地理定位的API，支持的主要方法是getCurrentPosition { navigator.geolocation.getCurrentPosition(displayLocation, displayError);
google地图js，添加标记，以及infowindow信息弹窗
最新发布
第⑦个前端
05-07 302
google地图js，添加标记，以及infowindow信息弹窗
【Javascript Demo】谷歌地图简单实现（附遮罩层和弹出层实现）
09-05 158
虽然百度地图实现了，但只是国内的，而且前几天貌似还出问题了，对于国际的只能用谷歌地图了，所以就简单研究了下，做了个差不多的。 基本步骤，谷歌地图API文档其实写的很清楚了，先获取API密钥，然后引用js链接，照着敲就行了。 下面是我写的示例和代码，仅供参考，点击查看地图，会弹出大的谷歌地图显示： 地 址：4035 NORTH NELLIS BOULEVARD,LA...
谷歌浏览器弹出窗口html代码,谷歌浏览器显示通知消息JS代码
weixin_33045071的博客
06-10 2220
谷歌浏览器显示通知消息JS代码点击显示通知会弹出通知对话框，如下图效果：h5通知消息对话框代码如下：开心洋葱谷歌浏览器通知消息JS代码* {margin: 0; padding: 0;}body, html {width: 100%; height: 100%;}点击下面的《显示通知》按钮，谷歌浏览器会自动弹出是否当前域名允许通知消息对话框，点击允许，即可弹出通知对话框。显示通知$(functio...
javascript 调用谷歌地图API 输入地址 点击弹出悬浮信息
weixin_34414650的博客
06-04 163
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://maps.google.com/maps/api...
Js 对 Google Maps API 实际应用
TianGaojie123abc的专栏
03-19 1959
谷歌地图api的实际应用地址： https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn 具体代码如下： 方法一：       name="viewport" content="initial-scale=1.0, user-scalable=no" />     type="tex
使用asp.net调用谷歌地图api示例
01-20
asp.net调用谷歌地图api，需要注意js引入的先后顺序，复制一下代码即可测试 <html xmlns=http://www.w3.org/1999/xhtml> <head> <title></title>//在这里要注意js引入的先后顺序 <link ...
详解vue项目中调用百度地图API使用方法
01-19
步骤一：申请百度地图密钥；...百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key  步骤二：在index.html中添加百度地图JavaScript API接口；  [removed][removed] // v1.4版本以及以前版本 <
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
10-18
JavaScript实现的鼠标悬浮弹出悬浮层效果是一种常见的交互设计，常用于网站的提示信息或功能说明。本示例中，当鼠标悬停在特定的文字（如"警告消息"）上时，会显示一个悬浮层，展示更多的信息。下面将详细解释实现这...
ArcGIS API for JavaScript3加载谷歌地图
12-28
本文将深入探讨如何使用ArcGIS API for JavaScript 3.23版本加载并集成在线的谷歌地图，以及展示谷歌地图的影像和标注。 首先，我们要了解ArcGIS API for JavaScript的核心概念。这是一个基于Web的开发库，由Esri...
google地图开发(1)，增删创建地图、marker标记、信息弹窗、反向地理编码
weixin_45152159的博客
05-14 910
前提 首先要去google地图申请一个api_key，教程参考:https://blog.csdn.net/Ariel_201311/article/details/94441085 然后要多看文档google地图api 正文 引入谷歌地图 //vue的话在根目录的index.html引入即可 <script src="https://maps.googleapis.com/maps/api/js?key=申请到的key"</script> 初始化地图 function initMap(
谷歌地图定位、搜索与获得点击位置坐标
04-17
谷歌地图根据搜索内容显示位置,根据鼠标点击位置返回经纬度值. 根据内容显示地图.自己写的,如需改善,可自行修改代码.
google map的api无法自动充填地址搜索框
A_ccelerator的博客
10-31 357
使用google map的api实现自动充填input 标签补全搜索的位置提示时遇到了无法自动充填的问题，我的解决方案如下： //添加样式 .pac-container { z-index: 1100 !important; } The reason was that map hasz-index: 1000and modal hasz-index: 1050. S...
Google Maps API –地图类型示例
一名可爱的技术搬运工
05-26 985
Google Maps API支持四种地图类型： ROADMAP –显示普通的街道/道路地图（默认地图类型）。 地形-根据地形信息显示正常的街道/道路地图。 卫星–仅显示卫星图像。 混合–普通和卫星视图混合显示，在卫星图像上方显示街道/道路视图。 注意 通常，您只使用“ ROADMAP ”或“ HYBRID ”，而“ TERRAIN ”和“ SATELLITE ”的用例...
google地图设置语言
txl910514的专栏
10-20 1819
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyB062x7b2UUvRIMLRIHJ8rFaZXGSkca89c&sensor=true&language=ru"></script> 在链接上使用language的参数 这里是设置显示语言的地方，参数是language=ru，从上面的示例可以看出，显示语言是俄语，也就.
Google Map API使用中出现的“google未定义”解决办法
知然的专栏
05-17 6931
在网站中使用Google Map API V3版本，按照网站https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn中的例子，代码如下： GoogleMap html { height: 100% } body { height
HTML5在页面上使用谷歌地图
qq_36354609的博客
08-31 5507
1.在页面上使用谷歌地图的步骤  1）.在页面中导入Google map api 的脚本文件   script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">/script> 2).设定地图参数，设定方法如下： var coords = position
uniapp中输入两个地址调用高德地图api算出距离
04-22
你可以通过引入高德地图 JavaScript API，在 JavaScript 中调用高德地图 Distance 类的 getDistance 函数来计算两个地址之间的直线距离。 以下是一个简单的示例代码： ``` javascript // 引入高德地图 JavaScript API <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script> // 输入两个地址 var address1 = "北京市海淀区上地南口路2号"; var address2 = "北京市海淀区北太平庄路甲16号"; // 创建一个地图实例 var map = new AMap.Map('mapContainer'); // 根据地址获取经纬度坐标 var geocoder1 = new AMap.Geocoder({ city: "北京市", // 城市，默认：“全国” radius: 1000 // 范围，默认：500 }); var geocoder2 = new AMap.Geocoder({ city: "北京市", radius: 1000 }); geocoder1.getLocation(address1, function(status, result1) { if (status === 'complete' && result1.info === 'OK') { var lnglat1 = result1.geocodes[0].location; geocoder2.getLocation(address2, function(status, result2) { if (status === 'complete' && result2.info === 'OK') { var lnglat2 = result2.geocodes[0].location; // 计算两个经纬度之间的直线距离 var distance = map.getDistance(lnglat1, lnglat2); console.log(distance); } else { console.log("获取地址2的经纬度坐标失败：" + result2.info); } }); } else { console.log("获取地址1的经纬度坐标失败：" + result1.info); } }); ``` 上述代码中，YOUR_KEY 是你在高德开放平台注册后生成的 API Key，应替换为你自己的值。其中，address1 和 address2 是两个需要计算距离的地址。geocoder1 和 geocoder2 分别是负责将地址转换为经纬度坐标的 Geocoder 实例。当获取到两个地址的经纬度坐标之后，就可以通过 map.getDistance 函数来计算它们之间的直线距离。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值