利用 google map 写的地图，简单的用了一些功能

最新推荐文章于 2018-05-14 20:20:45 发布

ttt2

最新推荐文章于 2018-05-14 20:20:45 发布

阅读量1.8k

点赞数

文章标签： google function div api 文档 border

本文链接：https://blog.csdn.net/ttt2/article/details/3764930

版权

设置坐标

/**
   * 这个例子演示了 Google 地图 API 的以下功能:
   *   * 可拖拽的标记
   *   * 自定义标记的图标
   *   * 计算地理距离
   *   * 事件处理（单击）
   *   * 信息窗口
   *   * 和文档模型(DOM)交互
   *
   * @author haogang
   */

var targets = [
    {'name':'中心', 'pt':[37, 107], 'icon':'/images/google/images/blue'}
];

var markers = [];          // 给用户拖拽的标记
var targetMarkers = [];    // 显示正确答案的标记
var map;                   // 全局的 Google 地图控件

/**
   * 为信息窗口创建 DOM 对象，包括地点的名称和简要描述
   * @param {Number} i 该地点在 targets 数组中的下标
   */
function createInfoWindow(i) {
    // 从网页的隐藏部分载入该地点的描述性文字
    var targetDescs = document.getElementById('targetDescs');
    var desc = targetDescs.getElementsByTagName('div')[i].innerHTML;

    // 为信息窗口创建动态 DOM 对象，这里我们用 DIV 标签
    var div = document.createElement('div');
    div.innerHTML = '<div style="font-size: 9pt; width:300px"><b>'
        + targets[i]['name'] + '</b><br/>' + desc + '</div>';

    // 当用户关闭信息窗口时 Google Map API 会自动释放该对象
    return div;
}

/**
   * 本函数为每个地点创建两个标记：一个给用户拖拽，另一个显示标准答案
   * @param {Number} i 该地点在 targets 数组中的下标
   */
function createMarker(i) {

    // 先创建给用户拖拽的标记：一开始它们依次排列在地图的左上角
    // 下一行代码演示了如何将 map 控件的像素坐标转化为经纬度
   <%if isnew=1 then
   %>
    var initPt = map.fromContainerPixelToLatLng(new GPoint((i + 1) * 100, 50));
<%else%>
var initPt = new GLatLng(<%=xzb%>, <%=yzb%>);
<%end if%>
    var ico = new GIcon(G_DEFAULT_ICON, targets[i]['icon'] + '.png');

    // 参数 draggable: true 表示可拖拽
    var marker=new GMarker(initPt, { draggable: true, icon: ico })
    markers.push(marker);
    //markers.push(new GMarker(initPt, { draggable: true, icon: ico }));

    // 再创建正确答案的标记：将它们放在正确的位置上，而且是不可拖拽的
    //var targetPt = new GLatLng(targets[i]['pt'][0], targets[i]['pt'][1]);
    //var marker = new GMarker(targetPt, { icon: new GIcon(ico) });
    //targetMarkers.push(marker);

    // 为正确答案标记添加事件处理函数：用户单击它时会弹出信息窗口
    GEvent.addListener(marker, 'click',
        function() {
          marker.openInfoWindow('<%=sm%>');
        }



    );
     map.addOverlay(markers[i]);
}

/**
   * 创建地图控件，以及两组标记
   */
function load() {
    if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById('map'));
      // 将视图移到中国
      map.setCenter(new GLatLng(37, 107), 4);

    // 给地图添加内置的控件，分别为：
      // 平移及缩放控件（左上角）、比例尺控件（左下角）
      map.addControl(new GLargeMapControl());
      map.addControl(new GScaleControl());
      //map.addControl(new GOverviewMapControl());


      // 为 targets 数组中的每个地点，创建两个标记
      for (i = 0; i < targets.length; i++) {
        createMarker(i);
      }

}
}

function getwz()
{
var marker = markers[0].getPoint();
var y = marker.lng();
var x = marker.lat();

alert(x)
}
//]]>

列表显示

        // 为所有标记创建指定阴影、图标尺寸灯的基础图标
        var baseIcon = new GIcon();
       // baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(30, 30);
        baseIcon.shadowSize = new GSize(0, 0);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(18, 25);

// 先创建给用户拖拽的标记：一开始它们依次排列在地图的左上角
// 下一行代码演示了如何将 map 控件的像素坐标转化为经纬度

var initPt = new GLatLng(targets[i]['pt'][0], targets[i]['pt'][1]);

if(targets[i]['pic']=="0")
{

var ico = new GIcon(G_DEFAULT_ICON, targets[i]['icon'] + '.png');
}
else
{

var ico = new GIcon(baseIcon, targets[i]['icon'] + '.png');
}

    // 参数 draggable: true 表示可拖拽
    var marker=new GMarker(initPt, { draggable: false, icon: ico })

    markers.push(marker);
    //markers.push(new GMarker(initPt, { draggable: true, icon: ico }));

    // 为正确答案标记添加事件处理函数：用户单击它时会弹出信息窗口
    GEvent.addListener(marker, 'click',
        function() {
          marker.openInfoWindow("<b>"+targets[i]['name']+"</b>:"+targets[i]['sm']+"<br><Br><a href=/"http://www.yangzhi.com/sp.asp?fid=" + targets[i]['sp'] + "/" target=_blank>我的商铺</a> <a href=/"http://www.yangzhi.com/ly.asp?fid=" + targets[i]['sp'] + "/" target=_blank>给我留言</a>");
        }

    );
     map.addOverlay(markers[i]);
   markers[i].openInfoWindow("<b>"+targets[i]['name']+"</b>:"+targets[i]['sm']);
}