在html中引入谷歌地图

最近项目中需要用到谷歌地图，以下做个简单分享，希望帮助到有需要的各位！
引入地图之前，首先申请key值申请google地图api_key详情介绍
详细代码

<html><div id="showMap"><!--存放地图的DOM元素--><div id="map"></div>  <form method="post"><!--点击地图中的某个位置，存在被点击位置的经纬度--><input id="lat" readonly="yes"><br><input id="lng" readonly="yes"></form></div><script src="https://maps.googleapis.com/maps/api/js?key=‘你申请的key值&callback=initMap&libraries=&v=weekly’" defer></script><script type="text/javascript">var map; //定义一个map对象.var geocoder;var marker = false; //用户是否标出了他们的位置标记function showInfo(latlng) {geocoder.geocode({'latLng': latlng}, function (results, status) {if (status == google.maps.GeocoderStatus.OK) {if (results[1]) {//在点击地图中的位置后，会返回被点击位置的详细地址console.log(results[1].formatted_address);} else {alert('No results found');}} else {alert('Geocoder failed due to: ' + status);}});}function httpGet(theUrl) {var xmlHttp = new XMLHttpRequest();xmlHttp.open("GET", theUrl, false); // false for synchronous requestxmlHttp.send(null);return xmlHttp.responseText;}//地图初始化function initMap() {geocoder = new google.maps.Geocoder();//地图的中心位置（经纬度设置了一个默认值）var centerOfMap = new google.maps.LatLng(52.357971, -6.516758);//options.var options = {center: centerOfMap, //设置中心位zoom: 10 //zoom属性指定了地图的缩放级数，10表示初始地图展示被放大了10倍};//生成map对象.map = new google.maps.Map(document.getElementById('map'), options);// 标记地图初始的中心位置var marker = new google.maps.Marker({position: centerOfMap,map: map,});var infowindow = new google.maps.InfoWindow({content:  “I‘m here!”});infowindow.open(map, marker);//监听地图上的点击事件.google.maps.event.addListener(map, 'click', function (event) {//点击后放大12倍// map.setZoom(12);//当用户点击后获取点击的位置.var clickedLocation = event.latLng;//如果marker没有被添加.if (marker === false) {//新建一个markermarker = new google.maps.Marker({position: clickedLocation,map: map,draggable: true //marker是否能被拖动});//监听marker的拖动事件google.maps.event.addListener(marker, 'dragend', function (event) {markerLocation();});} else {//如果marker已经被添加，点击的时候仅需要改变marker的位置.marker.setPosition(clickedLocation);}//获取marker的位置.markerLocation();// 展示点击后的地图信息showInfo(clickedLocation)var url = 'https://maps.googleapis.com/maps/api/geocode/json?key=你申请的key值&latlng=52.357971,-6.516758&sensor=true/false';httpGet(url)});}//该函数用于获取标记的当前位置，然后添加纬度/经度function markerLocation() {//获取位置.var currentLocation = marker.getPosition();//将经纬度添加到相应的dom元素中.document.getElementById('lat').value = currentLocation.lat(); //纬度document.getElementById('lng').value = currentLocation.lng(); //经度}//加载地图google.maps.event.addDomListener(window, 'load', initMap);</script><style type="text/css">// 设置地图大小#map {width: 100%;height: 550px;}</style>
</html>

在html中引入谷歌地图相关推荐

vue全局引入openlayers_vue中使用OpenLayers（一）：引入谷歌地图
vue中使用OpenLayers(一):引入谷歌地图第一步 npm install ol package.json 中可以看到第二步引入 import "ol/ol.css" ...
vue+element中引入百度地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 前言: 您好,我是csdn-尔嵘,如果您需要雨伞,可以去TaoBao搜:华,诚,荣,邦,百,货谢谢您的支持! 1.首先你需要下载npm模 ...
如何在cad中导入谷歌地图_如何在Google地图中设置出发和到达时间
如何在cad中导入谷歌地图 Unless you work from home, Google Maps is fantastic at knowing where you need to be, a ...
如何在cad中导入谷歌地图_如何在Google地图中避开收费公路
如何在cad中导入谷歌地图 No one likes to pay to be able to drive on a specific road, especially if you're just ...
可集成在XPage中的谷歌地图控件
OpenNTF推荐项目"谷歌地图控件",可集成在XPage中,支持基于坐标和基于地址两种方式. ... 内容详见可集成在XPage中的谷歌地图控件
vue中引入高德地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 总的来说,vue组件中使用高德地图的方式有两种,一种是vue-amap :一套专门用于vue的高德地图插件:另外一种是原生的高德地图. 方式 ...
Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...
在vue中引入高德地图
既然要用到高德地图首先要申请成为高德地图开发者,并申请使用高德地图的key这两点在这篇文章就不过多赘述,有需要的小伙伴可以查查资料,或者去高德地图api官网都有很详细的介绍.高德地图官网简单提一下申 ...
Android程序地图,在定制的Android应用程序中使用谷歌地图
我收到以下问题(显示在LogCat中).我希望any1可以帮助我,因为我是android应用程序开发的新手.在定制的Android应用程序中使用谷歌地图 11-17 16:50:38.087: E/A ...

在html中引入谷歌地图

在html中引入谷歌地图相关推荐

最新文章

热门文章