Google Map 初步使用

最新推荐文章于 2021-08-12 20:44:07 发布

Coding迷

最新推荐文章于 2021-08-12 20:44:07 发布

阅读量1.9k

点赞数

分类专栏： Google Maps插件文章标签： Google Map 谷歌地图

本文链接：https://blog.csdn.net/weixin_44135763/article/details/86679280

版权

Google Maps插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用谷歌地图之前需要注册一个google邮箱，然后翻墙去获得秘钥

1、Html与jQuery项目里面使用Google map

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;  
        width: 100%;  
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--地图显示的位置-->
    <div id="map"></div>
    <script>
	function initMap() {
		var uluru = {lat: 22.539706, lng: 114.1144403};		//经纬度
        //zoom 表示地图的放大倍数
	      var map = new google.maps.Map(document.getElementById('map'), {zoom: 18, center: uluru});
	  //在地图上显示红色定位标记
		var marker = new google.maps.Marker({position: uluru, map: map});
	}
   </script>
    <!--填写Google地图秘钥-->
    <script src="https://maps.googleapis.com/maps/api/js?key=YourKey&callback&callback=initMap">
    </script>
  </body>
</html>

运行上面的代码就可以看到地图

在实际的开发中还会需要用到弹框或者点击事件等操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        html, body { height: 100%; margin: 0; padding: 0; }
        #map { height: 500px; width: 400px;}
    </style>
    <title>google map api demo</title>
</head>
<body>
<div id="map"></div>

<script>
    var map;
    var geocoder;
    var local;
    var myCenter;
    var contentString = '<div id="content">' +
    '<div>' +
    '</div>' +
    '<h1>自定义标签</h1>' +
    '<div id="bodyContent">' +
    '<p class = "mapStyle">我的百度 <a href="www.baidu.com">href="www.baidu.com" +
    '</div>' +
    '</div>';
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 18,
            center: new google.maps.LatLng(51.508742, -0.120850),
        });
      geocoder = new google.maps.Geocoder();
        var address="香港铜锣湾新宁道八号中国太平大厦19字楼";
        geocoder.geocode({'address':address},function(results,status){
            if(status==google.maps.GeocoderStatus.OK){
                map.setCenter(results[0].geometry.location);
                local = results[0].geometry.location;
                var marker=new google.maps.Marker({
					  position:local,
					  map:map,
					  title:address
					  });
				marker.setMap(map);
				google.maps.event.addListener(marker, 'click', function(event) {
				    //点击跳转
				    window.location.href = "http://maps.google.com/?q=九龙尖沙咀汉口道4-6号骐生商业中心11楼"
				})
				var infowindow = new google.maps.InfoWindow({
				  content:contentString
				  });
				
				infowindow.open(map,marker);
            }
        });
    }
</script>
<!--填写Google地图秘钥-->
<script src="http://ditu.google.cn/maps/api/js?key=？&callback=initMap"></script>
</body>
</html>

效果展示

值得注意的地方：http://ditu.google.cn，国内用户的可以访问，官方提供的https://maps.googleapis.com，在国内无法访问。但是国外可以访问http://ditu.google.cn，所以推荐使用http://ditu.google.cn

假如需要打开google map 导航，那么可以使用下面这个方法

function openApp() {
            window.location.href = "https://www.google.com/maps/dir/?api=1&origin="+开始地址+"&destination="+到达地址+"&travelmode=driving";
    }

Coding迷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google Map 初步使用

使用谷歌地图之前需要注册一个google邮箱，然后翻墙去获得秘钥1、Html与jQuery项目里面使用Google map&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;style&gt; #map { height: 400px; width: 100%; ...
复制链接

扫一扫