Google Map Api 的应用

最新推荐文章于 2024-04-28 17:05:59 发布

Pure0_0Water

最新推荐文章于 2024-04-28 17:05:59 发布

阅读量952

点赞数

分类专栏： JavaScript 文章标签： google api function div table html

本文链接：https://blog.csdn.net/Pure0_0Water/article/details/6076246

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近在项目中涉及到了google map api 的应用,写到这里,相信以后还会用到, 大家共勉..

代码如下

<head >

            var point = new GPoint(116.580981,35.414988);
            var marker = new GMarker(point);
            map.addOverlay(marker);

            point = new GPoint(116.588513,35.427106);
            var marker2 = new GMarker(point);
            marker2.openInfoWindowHtml("<font style='color:red;'><strong>济宁中山公用水务有限公司<br>客服中心共青团北路营业厅</strong></font>");
            map.addOverlay(marker2);

            point = new GPoint(116.607835,35.414306);
            var marker3 = new GMarker(point);
            map.addOverlay(marker3);

            GEvent.addListener(marker, 'click', function(overlay, point) {
                marker.openInfoWindowHtml("<font style='color:red;'><strong>济宁中山公用水务有限公司<br>客服中心水务大厦营业厅</strong></font>");
            });
            GEvent.addListener(marker2, 'click', function(overlay, point) {
                marker2.openInfoWindowHtml("<font style='color:red;'><strong>济宁中山公用水务有限公司<br>客服中心共青团北路营业厅</strong></font>");
            });
            GEvent.addListener(marker3, 'click', function(overlay, point) {
                marker3.openInfoWindowHtml("<font style='color:red;'><strong>济宁中山公用水务有限公司<br>客服中心琵琶山路营业厅</strong></font>");
            });
  }


</script>

</form>

</body>

效果如下：

实现这人效果还有另外一种写法，其实只是书写格式不一样而已

<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>地图test</title>
<script src="http://ditu.google.com/maps?file=api&v=2"
type="text/javascript"></script>
<script type="text/javascript">

    // 先清除掉当前的所有标注
    map.clearOverlays();

    // 再根据当前模式加入对应的标注
    for (i = 0; i < targets.length; i++) {
      map.addOverlay(targetMarkers[i] );
    }

}

   /* 本函数为每个地点创建正确的标注
   * @param {Number} i 该地点在 targets 数组中的下标
   */
function createMarker(i) {

    // 下一行代码演示了如何将 map 控件的像素坐标转化为经纬度

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

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

/**
   * 创建地图控件，以及标注
   */
function load() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(39.88174,116.40632),14);
    map.setMapType(G_SATELLITE_MAP);//修改地图类型
    //信息浮窗内容
    var infoTabs = [
    new GInfoWindowTab("环境", "天坛公园很漂亮，祈年殿尤其不错"),
    new GInfoWindowTab("饮食", "仅次于一般")
    ];
    //在地图的中心添加一个标记并自动打开其信息浮窗
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);

      //map = new GMap2(document.getElementById('map'));
   // 将视图移到中国.济宁市区
      //map.setCenter(new GLatLng(35.4008,116.5899), 11);
   // 为 targets 数组中的每个地点，创建标注
      //for (i = 0; i < targets.length; i++) {
        //createMarker(i);
      //}
      //switchMarkers();
    }
}

</script>
</head>
<body οnlοad="load()" οnunlοad="GUnload()">
<table width="100%">
<tr>
    <td style="width: 100%">
      <div id="map" style="width: 100%; height: 500px;"></div>
    </td>
</tr>
</table>
</body>
</html>

Pure0_0Water

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Google Map Api 的应用

<br />最近在项目中涉及到了google map api 的应用,写到这里,相信以后还会用到, 大家共勉..<br /> <br />代码如下<br /> <br /><head ><br /><br /> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /><br /><script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdef
复制链接

扫一扫