网页中Google Map的使用

最新推荐文章于 2024-04-30 16:57:21 发布

weixin_34279246

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量415

点赞数

文章标签： javascript ViewUI

要在自己的网页中嵌入地图，常用的方法可以归纳为以下几种：

1、最简单的方法 ——使用谷歌地图主页的"链接"

如果你只需要在自己的页面上显示某个特定范围的地图，比如你的公司所在地，但是不需要在地图上添加任何额外的内容，比如标记、折线等等，那么，使用这个方法来嵌入谷歌地图是最简单的。

登录谷歌地图主页，定位你需要显示的范围后，点击地图左上角的“链接”，会出现一个信息框，给出两个输入框，把第二个输入框中的内容拷贝到你的页面上就可以了。

其实，这段嵌入代码就是一个iframe的声明，所以，虽然地图主页提供一个自定义地图并预览的功能，但是只能自定义地图的大小，如果需要的话，我们完全可以通过手动修改这个iframe声明来实现更多的自定义，比如，给这段iframe加上自定义的样式。

2、最精简的方法 ——使用谷歌静态地图

如果你需要显示某个特定范围的地图，而且需要在地图上加上一些标记、折线。但是，你并不在乎你网页上的地图能否拖拽，那么，这个静态地图应该就是你需要的了。

所谓静态地图，意思就是你在页面上嵌入的其实只是一个GIF图片，这个GIF图片是你通过URL从谷歌动态获取的，这样的嵌入地图就有别于我们常用的“动态”地图了，而且，加载这样的地图，比加载一个完整的地图要快捷的多。

要在你的页面上使用这样的静态地图，只需要使用一个img标签，把这个标签的src属性指定为谷歌静态地图的url就可以了。

看一个简单的静态地图，以下示例包含纽约市区静态地图图片的网址，如下所示：

http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false

在这个URL中，你可以编辑center、zoom、size这些参数来指定地图的中心点、缩放级别、地图大小等等，当然，如果需要在地图上添加标记、折线，你还可以加上对应的参数。不过，不用担心你要记住这么多参数，这里有一个定制静态地图的向导，简单的几步就可以得到你需要的URL了。

请注意，您并非一定要使用密钥（虽然我们推荐这么做）。本文中的示例都不包含 key 参数，因此将适用于剪切粘贴该代码的所有用户。

严格来说，谷歌静态地图也是谷歌地图API的一种，所以，使用静态地图是需要你的谷歌地图API密钥的，如果你之前定义过地图API的密钥，直接copy过来就可以了，不需要再去注册。

3、最自由的方法 --使用谷歌地图API

如果上面两种方式都不能满足你的需求，那么，就来试试谷歌地图API。吧。虽然谷歌地图API已经细分为JavaScript、Flash、Earth、Static等等多个版本，但是，在我看来，JavaScript API是谷歌地图API的根本，所以，在我的博客里，除非特别指明，说到谷歌地图API都是指谷歌地图JavaScript API。使用这个API，你可以用你愿意的任何可行的表现形式在地图上展现你的数据，甚至可以把你自己的地图做的比谷歌地图还漂亮。

要使用这个API在页面中嵌入地图，简单的步骤就是：

1）使用JavaScript标签导入地图API类库；

2）在页面上定义一个装载地图的元素，通常使用一个div标签，指定width和height;

3）在你的JavaScript代码中new GMap2(document.getElementById("your map container's id"));

4）使用GMarker、GPolyline等API中提供的类定制你要在地图上添加的标记、折线等等。

一个简单的完整HTML如下：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    //sensor 是否会使用 GPS 定位器等传感器来确定用户的位置,必须将该值明确设为 true 或 false
    </script>
    <script type="text/javascript">
      //初始化地图，使用Map类

      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),   //指地图定位的坐标，需要LatLng对象，对象参数就是纬度和经度
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),    //地图div对象的id名，这个div要指明高度和宽度要不地图没法初始化
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

地图类型 google.maps.MapTypeId

ROADMAP，用于显示 Google 地图的默认、普通 2D 图块。
SATELLITE，用于显示拍摄的图块。
HYBRID，用于同时显示拍摄的图块和重要地图项（道路、城市名）的图块图层。
TERRAIN，用于显示自然地形图块，其中包含海拔和水体地图项（山脉、河流等）。

除了上面说的这几种方法，其实还有一些比较少用的方法也可以在网页中嵌入地图，比如比如使用Google Gadget API，我在博客右边栏嵌入的地图使用的就是Gadget API。

Marker类、InfoWindow

添加自定义的marker：

var userMarker = new google.maps.Marker( {
        position : new google.maps.LatLng(30,120),
        map : map,
        title : "鼠标悬浮时提示的信息",
        icon : "图片位置字符串"
    });
var yourInfoWindow;

(function(userMarker) {
    google.maps.event.addListener(userMarker, 'click', function() {
        if (!yourInfoWindow) {
            yourInfoWindow = new google.maps.InfoWindow( {});
        }
        yourInfoWindow.setContent(userMarker.title);
        yourInfoWindow.open(map, userMarker);
    });
})(userMarker);

1、Marker类是为地图上添加类似小图钉似的提示位置用的东西

2、Marker需要设置坐标和地图对象来初始化

3、同一个Marker对象要重用时使用下面语句重新使用

userMarker.setMap(null);

4、最后是为marker对象添加点击事件，使用的是嵌套写法（用在for循环里更好使）

5、infowindow是弹出的那个大窗体，他的setContent方法是支持html和css代码的，可以放进去div或table设置样式

LatLngBounds类
Map范围自适应：

var bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(30,120));
//为新的结果创建marker
for ( var i in member) {
    bounds.extend(new google.maps.LatLng(member[i][2],member[i][3]));
    var marker = new google.maps.Marker( {
        position : new google.maps.LatLng(member[i][2],    member[i][3]),
        map : map,
        title : "title",
        icon : "imageAddress"
    });
    markers.push(marker);
    //为marker添加infowindow，添加点击事件
    (function(i, marker) {
        google.maps.event.addListener(
            marker,
            'click',
            function() {
                if (!infoawindow) {//单例infowindow
                    infoawindow = new google.maps.InfoWindow(
                                                        {});
                }
                infoawindow.open(map, marker);
        });
    })(i, marker);
}
map.fitBounds(bounds);//这句最重要

Geocoder类
提交地址字符串返回经纬度（很好用的功能），查询全靠它

如果你不需要在自己的页面中嵌入地图，或者，你没有自己的网站，那么，使用Mapplet API也是一个不错的创建你自己的地图的方式。这是一个可以在谷歌地图主页上“我的地图”中运行的小程序，它的API其实就是谷歌地图API的一个子集，因为要在谷歌地图主页中嵌入，所以与谷歌地图API稍稍有一些不同。详细情况可以参考一下Mapplet API的开发文档

var geocoder = new google.maps.Geocoder();
    geocoder.geocode( {
        'address' : "格式可以是不分割的：北京市东城区东直门，或北京市,东城区,东直门"
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            myLatLng = results[0].geometry.location;
            //results数组里有很多有用的信息，包括坐标和返回的标准位置信息
        } else {
            alert(interGeoAnalysisFailed);
        }
    });

地图导航服务

var map;    //地图对象    
var mode = google.maps.DirectionsTravelMode.DRIVING;    //谷歌地图路线指引的模式
var directionsDisplay = new google.maps.DirectionsRenderer();    //地图路线显示对象
var directionsService = new google.maps.DirectionsService();    //地图路线服务对象
var directionsVisible = false;    //是否显示路线
directionsDisplay.setMap(null);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));    //将路线导航结果显示到div中    
var request = {origin: findLatLng, destination: marker.position, travelMode: mode, optimizeWaypoints: true, avoidHighways: false,avoidTolls: false};
directionsService.route
(
    request,
    function(response, status)
    {
           if (status == google.maps.DirectionsStatus.OK)
           {
                   directionsDisplay.setDirections(response);
           }
       }
);
directionsVisible = true;

详细情况和进一步的参考：https://developers.google.com/maps/documentation

weixin_34279246

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
网页中Google Map的使用

要在自己的网页中嵌入地图，常用的方法可以归纳为以下几种：1、最简单的方法 ——使用谷歌地图主页的"链接" 如果你只需要在自己的页面上显示某个特定范围的地图，比如你的公司所在地，但是不需要在地图上添加任何额外的内容，比如标记、折线等等，那么，使用这个方法来嵌入谷歌地图是最简单的。登录谷歌地图主页，定位你需要显示的范围后，点击地图左上角的“链接”，会出现一个信息框，给...
复制链接

扫一扫