在html中引入谷歌地图

最新推荐文章于 2024-03-08 14:50:51 发布

wllsunshine

最新推荐文章于 2024-03-08 14:50:51 发布

阅读量2.3k

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/wllsunshine/article/details/112393543

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近项目中需要用到谷歌地图，以下做个简单分享，希望帮助到有需要的各位！
引入地图之前，首先申请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 request
	        xmlHttp.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) {
	                //新建一个marker
	                marker = 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>

wllsunshine

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
在html中引入谷歌地图

最近项目中需要用到谷歌地图，以下做个简单分享，希望帮助到有需要的各位！引入地图之前，首先申请key值申请google地图api_key详情介绍详细代码<html> <div id="showMap">  <div id="map"></div> <form method="post"> 
复制链接

扫一扫