google -- map -- api

最新推荐文章于 2024-05-31 10:01:52 发布

gz2008gz

最新推荐文章于 2024-05-31 10:01:52 发布

阅读量454

点赞数

分类专栏：网页制作文章标签： google function html div api xml

本文链接：https://blog.csdn.net/gz2008gz/article/details/4494767

版权

网页制作专栏收录该内容

38 篇文章 0 订阅

订阅专栏

第一步：
去http://www.google.com/apis/maps/signup.html 申请一个KeyID

    第二步：
    在HTML的<title></title>之间加上对MapAPI函数库的引用，
    <script. src="http://maps.google.com/maps?file=api&v=2&key= YourKeyID" type="text/javascript"></script>

    第三步：
    在HTML的<body></body>之间的任意位置加上一个名为map的DIV，
    <div id="map" style="width: 700px; height: 560px" align="center"></div>

    第四步：
    在名为map的DIV后面，加上GMap类的实例，
        <script. type="text/javascript">
        //建立 GMap类的实例
        var map = new GMap(document.getElementById("map"));
        //添加一个控制条
        map.addControl(new GSmallMapControl());
        //配置显示模式为卫星影像
        map.setMapType(G_SATELLITE_TYPE);
        //配置中心点经纬度（上海）和缩放系数，并显示
        map.centerAndZoom(new GPoint(121.4838, 31.2517), 4);
</script>

    第五步：
    随机添加 10个标记点，
    var bounds = map.getBoundsLatLng();
    var width = bounds.maxX - bounds.minX;
    var height = bounds.maxY - bounds.minY;
    for (var i = 0; i < 10; i++) {
        var point = new GPoint(bounds.minX + width * Math.random(),
                 bounds.minY + height * Math.random());
        var marker = createMarker(point, i + 1);
        //添加标记点
        map.addOverlay(marker);
   }

    第六步：
    添加事件响应，
        function createMarker(point, number)
        {
           var marker = new GMarker(point);

           // Show this marker's index in the info window when it is clicked.
           var html = "Marker #<b>" + number + "</b>";
           GEvent.addListener(marker, 'click', function() {
           marker.openInfoWindowHtml(html);});

return marker;
}

http://maps.google.com/maps?file=api&v=2&key=******" type="text/javascript">

//        var points = [];
        var markers = [];
        var infoWindowHtml = [];
        var sidebarHtml = "";

        var redCircleIcon = new GIcon();
        redCircleIcon.image = "RedCircle7x7.gif";
        redCircleIcon.iconSize = new GSize(7, 7);
        redCircleIcon.iconAnchor = new GPoint(3, 3);
        redCircleIcon.infoWindowAnchor = new GPoint(3, 3);

        function createBridgeMarker(ind, name, latitude, longitude) {
            var marker;
            points[ind] = new GLatLng(latitude, longitude);
            marker = new GMarker(points[ind], redCircleIcon);

infoWindowHtml[ind] = "http://www.google.com/search?q=%22" + name + "%22/" target=/"_blank/">" + name + "";
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(infoWindowHtml[ind]);
            });
            markers[ind] = marker;
            sidebarHtml += "
" + name + "

";
return marker;
}

        function markerSelected(ind) {
            markers[ind].openInfoWindowHtml(infoWindowHtml[ind]);
        }
function onLoad() {
    // Creates a map and centers it on the Hot Metal Bridge in Pittsburgh.
    if (GBrowserIsCompatible()) {
              var map = new GMap2(document.getElementById("map"));
              map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(40.6413,-74.1428), 11, G_NORMAL_MAP);

              GDownloadUrl("Bridges.xml", function(data, responseCode) {
                 var xml = GXml.parse(data);
                 var bridges = xml.documentElement.getElementsByTagName("bridge");
                 for (var i = 0; i < bridges.length; i++) {
                    var name = bridges[i].getAttribute("name");
                    var latitude = parseFloat(bridges[i].getAttribute("latitude"));
                    var longitude = parseFloat(bridges[i].getAttribute("longitude"));
                    var marker = createBridgeMarker(i, name, latitude, longitude)

    map.addOverlay(marker);
                 }
                 document.getElementById("sidebar").innerHTML = sidebarHtml;
              });
    }
}