`

用js显示google地图总结

 
阅读更多

 功能较全的一个，可显示地址，可以缩放，拖动（直接把代码复制下来即可）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>MyHtml2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src="http://maps.google.com/maps?file=api&;v=2&key=ABQIAAAABjfudy2JHun7akhM9qSqPxQ_Zu-7BHeTikSrrThuN_kCyr6v3xS2zdq46jLJxIIm3VuRdZkpY0AsbQ"
        type="text/javascript"></script>

</head>

<script type="text/javascript">
    var map;
    var companyAddress = "地址：";
    function initialize() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("mapdiv"));
    
            //设置地图中心点和缩放级别
            map.setCenter(new GLatLng(31.2249992526385, 121.51159197092056), 18);
            map.openInfoWindow(map.getCenter(), companyAddress);
            GEvent.addListener(map, "click", function(overlay, point) {

            map.openInfoWindow(new GLatLng(31.2249992526385, 121.51159197092056), companyAddress);
            }); //点击就显示地址，缺点：地点提示关不掉。若把以上三行注释掉，关掉地点提示，就无法在打开提示。
            map.enableContinuousZoom();
            //启用使用鼠标滚轮缩放
            map.enableScrollWheelZoom();
            //添加地图类型
            //map.addMapType(G_PHYSICAL_MAP);
            //设置地图显示类型
            //map.setMapType(G_PHYSICAL_MAP);
            //添加控件
            map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 32)));
        }
    }

</script>

<body onload="initialize()" onunload="GUnload()">
    <div id="mapdiv" style="width: 695; height: 374; font-size:15px;">
        </div>
    <br>
</body>
</html>
点击显示经纬度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>MyHtml2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src="http://maps.google.com/maps?file=api&;v=2&key=ABQIAAAABjfudy2JHun7akhM9qSqPxQ_Zu-7BHeTikSrrThuN_kCyr6v3xS2zdq46jLJxIIm3VuRdZkpY0AsbQ"
        type="text/javascript"></script>

</head>

<script type="text/javascript">
    var map;
    function initialize() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("mapdiv"));
    
            //设置地图中心点和缩放级别
            map.setCenter(new GLatLng(31.2249992526385, 121.51159197092056), 18);
            GEvent.addListener(map, "click", function(overlay, point) {
//                document.getElementById("x").value = point.x;
//                document.getElementById("y").value = point.y;
                //  var center = new GLatLng(point);
//                var marker = new GMarker(point, { draggable: true });

//                GEvent.addListener(marker, "dragstart", function() {
//                    map.closeInfoWindow();
//                });

//                GEvent.addListener(marker, "dragend", function() {
//                    marker.openInfoWindowHtml("正在反弹...");
//                });
                //map.clearoverlays();
              //  map.addOverlay(marker);


                var myHtml = "GPoint 值是 : " + point;
                map.openInfoWindow(point, myHtml);
            });
            map.enableContinuousZoom();
            //启用使用鼠标滚轮缩放
            map.enableScrollWheelZoom();
            //添加地图类型
            //map.addMapType(G_PHYSICAL_MAP);
            //设置地图显示类型
            //map.setMapType(G_PHYSICAL_MAP);
            //添加控件
            map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 32)));
        }
    }

</script>

<body onload="initialize()" onunload="GUnload()">
    <div id="mapdiv" style="width: 695; height: 374">
        mapdiv</div>
    <br>
</body>
</html>

右下角显示当前位置

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Google Maps</title>
 <script src="http://maps.google.com/maps?file=api&v=3&key=ABQIAAAAB4YemV6fPrENI8yI4YDFtRTmwICogzMOKaxKEnhPUPLF-x6hxRR4Q894V3A6N4GoB5q-EdU1SKPArg" type="text/javascript"></script>
  <script type="text/javascript">


    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(23.755181766112635, 120.552978515625), 7);
        map.setUIToDefault(); 
        map.addControl(new GMapTypeControl());  
        map.addControl(new GNavLabelControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(1, 2)));
        map.enableGoogleBar();

      //讀取user.xml
        GDownloadUrl("user.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("row");
          var points = new Array();
          
          for (var i = 0; i < markers.length; i++) {
            point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lng")));
                        
            var marker = new GMarker(point);
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("contact_address");
            var html = "<b>" + name + "</b> <br/>" + address;
           
            GEvent.addListener(marker, "click", function() {
              this.openInfoWindowHtml(html);
              
            });
            map.addOverlay(marker);
          }

        });
      }
    }
  </script>
 </head>
 <body onload="initialize()" onunload="GUnload()">
  <div id="map_canvas" style="width: 700px; height: 400px"></div>
 </body>
</html>

 

分享到：
| js 计算浏览器宽度和高度
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics