zoukankan      html  css  js  c++  java
  • 初识 GoogleMap

             GoogleMap的文档写的相当好,照着做基本上没什么问题,就当记事本了。

    View Code
     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     2 <html>
     3  <head>
     4   <title>Hello World</title>
     5   <style type="text/css">
     6    html{height:100%}
     7    body{height:100%;margin:0px;padding:0px}
     8    #map_canvas{height:100%}
     9    </style>
    10    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    11    </script>
    12    <script type="text/javascript">
    13     function initialize(){
    14       var latlng=new google.maps.LatLng(-34.37,150.644);
    15       var myOptions={
    16         zoom:12,
    17         center:latlng,
    18         mapTypeId:google.maps.MapTypeId.ROADMAP
    19       };
    20       var map=new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    21     }
    22     </script>
    23  </head>
    24 
    25  <body onload="initialize()">
    26   <div id="map_canvas" style="100% ;height:100%"></div>
    27  </body>
    28 </html>

    1:当然要引入Google Map API .

    2:创建LatLng对象,这是最重要的,包含经纬度,Google就是通过它来定位的。

    3:创建Map Options,包括zoom(地图的放大倍数1-15),center(包含经纬度的对象),mapTypeId(地图类型:包括

    • ROADMAP displays the normal, default 2D tiles of Google Maps.
    • SATELLITE displays photographic tiles.
    • HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
    • TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).

    4:创建Map对象。

  • 相关阅读:
    springBoot jpa 分页
    springBoot jpa 表单关联查询
    springBoot 登录拦截器
    SpringBoot 封装返回类以及session 添加获取
    SpringBoot 数据库操作 增删改查
    IDEA SpringBoot +thymeleaf配置
    IDEA Spring Boot 项目创建
    php判断手机段登录,以及phpcms手机PC双模板调用
    简单爬虫,查博客浏览量
    [51nod1357]密码锁 暨 GDOI2018d1t2
  • 原文地址:https://www.cnblogs.com/az19870227/p/2032776.html
Copyright © 2011-2022 走看看