谷歌地图的简单使用

最新推荐文章于 2024-07-28 02:22:09 发布

杉木卓卓

最新推荐文章于 2024-07-28 02:22:09 发布

阅读量1.2k

点赞数

分类专栏： java 文章标签： Google地图

本文链接：https://blog.csdn.net/qq_34259584/article/details/79016852

版权

java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

content
{:toc}

谷歌地图的简单使用

要使用谷歌地图先申请一个谷歌账号用来获取密钥，当然这样的密钥在网上也能搜的到，不想翻墙注册的话就去搜素吧。
注意在申请谷歌地图时我遇到了手机号无法用于验证，我的解决办法是将地区改为台湾就可以了。如图：

获取密钥后，按照官方文档进行demo示例。

Demo 示例

<html>
  <head>
    <title>Simple click event</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <script type="text/javascript" src="${cdn}/js/jquery-1.9.1.min.js"></script>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
<body>
<div id="map"></div>
<script>
  var myLatlng;
  var marker;
  var map ;
  var infowindow;
  function initMap() {
    myLatlng = {lat: 22.579620019918522, lng: 113.8608455657959};

    // 创建地图
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: myLatlng
    });

    // 创建标记
    marker =new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'my marker'
     });

    // 创建信息窗口
    infowindow = new google.maps.InfoWindow();

    marker.addListener('click', function() {
        map.setZoom(15);
        map.setCenter(marker.getPosition());
    });

    map.addListener('click', function(e) {
        console.log("纬度是："+e.latLng.lat()+"经度是："+e.latLng.lng());
    });

    // marker2的点击事件
    google.maps.event.addListener(marker2, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map, this);
    });
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=Your key&language=cn&callback=initMap">
</script>
  </body>
</html>

demo解释

在id为map的div中创建地图实例。使用google.maps.Map的构造函数创建map对象。new google.maps.Map(document.getElementById(‘map’)，{参数}}
myLatlng:代表地点的位置；lat—纬度，lng—经度

初始化map的参数说明

zoom:地图的缩放级别。
center : 地图的中心位置
scaleControl：是否使用地图的缩放控件，值为boolean型
rotateControl：是否使用旋转控件，值为boolean型。
没写的就去谷歌地图看api吧。。。。

script链接参数说明

key ：在谷歌地图申请的密钥
language ：语言设置，常用的是cn,en.可选
callback ：回调函数，这里是用来初始化map.可选
libraries ：要使用的内容库。可选
async defer：不进行同步操作，即渲染地图的同时允许其他的加载操作。

marker创建

使用google.maps.Marker创建对象，形式为： marker =new google.maps.Marker({参数：value});

marker参数说明

position : marker的位置，即使用Latlng作为值如 {lat: 22.579620019918522, lng: 113.8608455657959}
map: 所属的map地图，Map类型
title: 标题,String类型
icon: 如果值是一串String，则表示用此string作为URL的图片为marker的图片
…

marker的方法

清除marker：清除地图上的标记marker.setMap(null);将map设置为null即可清除。
marker.getPosition()：获取标记的LatLng对象，即标记的位置
marker.addListener(‘click’, function() { //dosth }):为marker添加点击事件，其余事件列表见api
。。。

map的方法

map.setZoom(int): 设置map的缩放参数等级
map.setCenter(LatLng): 设置map的中心
map.panTo(LatLng): 将map可视区域移动到以LatLng为中心的地方
map.addListener(‘click’, function(e) { //dosth }): 为map添加点击事件。事件的列表详情见api。其中参数e.latLng为获得LatLng对象，e.latLng.lat()即表点击位置的纬度。
。。。。