Google地图标注(带搜索功能)

最新推荐文章于 2025-03-13 10:30:58 发布

转载最新推荐文章于 2025-03-13 10:30:58 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chaige/archive/2011/08/12/google-map.html

文章标签：

#javascript #python #ViewUI

本文详细介绍了如何使用Google地图API加载地图并实现自定义标记功能，包括地图初始化、地图尺寸调整、坐标定位、标记创建及交互操作等核心步骤。同时，展示了如何在地图上添加搜索功能，使得用户可以通过输入关键词来查找特定位置，并在地图上显示结果。通过实例代码，深入浅出地阐述了Google地图API的应用与实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先引入GOOGLE MAP的JS文件

以下为源代码

String.prototype.trim = function() {
    return this.replace(/(^\s*)|(\s*$)/g, "");
};
String.prototype.empty = function() {
    return this.trim() == "";
};
String.prototype.format = function() {
    var args = arguments;
    return this.replace(/\{(\d+)\}/g, function(m, i) {
        return args[i];
    });
};
Array.prototype.indexOf = function(v) {
    for (var i = 0; i < this.length; i++) {
        if (v == this[i]) {
            return i;
        }
    }
    return -1;
};
var GoogleMap = function(obj) {
    this.Latitude = obj.Latitude || 116.407413;
    this.Longtitude = obj.Longtitude || 39.904214;
    this.Width = obj.Width || 400;
    this.Height = obj.Height || 300;
    this.Html = obj.Html || null;
    this.AllowSearch = obj.Search || false;
    this.Map = null;
    this.Markers = [];
    this.Container = obj.Container || null;
    this.ScrollWheelZoom = obj.ScrollWheelZoom || false;
    this.LargeMapControl = obj.LargeMapControl || false;
    this.MapTypeControl = obj.MapTypeControl || false;
    this.OverviewMap = obj.OverviewMap || false;
    this.obj = null;
    this.Width = this.Width <= 400 ? 400 : this.Width;
    this.Height = this.Height <= 300 ? 300 : this.Height;
    this.Id = obj.Id || 'google{0}'.format(Math.ceil(Math.random() * 10000));
    this.Geocoder = null;
    this.init();

};
GoogleMap.prototype = {
    addEvent: function(o, a, b) {
        o.attachEvent ? o.attachEvent('on' + a, function() {
            b.call(o)
        }) : o.addEventListener(a, b, false)
    },
    loadMap: function() {
        var $ = this;
        if ($.Map) return;
        if (!$.obj.innerHTML.empty()) return;
        var o = document.createElement('div');
        o.style.cssText = 'width:{0}px;height:{1}px;border:1px solid #a5bfdd'.format($.Width, $.Height);
        $.obj.appendChild(o);
        $.Map = new GMap(o);

        var myCenter = new GPoint($.Latitude, $.Longtitude);
        $.Map.centerAndZoom(myCenter, 8);
        //创建带有可在四个方向平移、放大、缩小的按钮，以及缩放滑块的控件。
        if ($.LargeMapControl) $.Map.addControl(new GLargeMapControl());
        //创建带有切换地图类型的按钮的控件。GMapTypeControl
        if ($.MapTypeControl) $.Map.addControl(new GMenuMapTypeControl());
        if ($.OverviewMap) $.Map.addControl(new GOverviewMapControl());
        //设置地图支持滚轮
        if ($.ScrollWheelZoom) $.Map.enableScrollWheelZoom();
    },
    icon: function() {
        var c = new GIcon();
        c.image = "http://maps.google.com/mapfiles/ms/micons/red-dot.png";
        c.shadow = "http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png";
        c.iconSize = new GSize(32, 32);
        c.shadowSize = new GSize(37, 34);
        c.iconAnchor = new GPoint(9, 34);
        c.infoWindowAnchor = new GPoint(9, 2);
        c.infoShadowAnchor = new GPoint(18, 25);
        return c;
    },
    createMarker: function(html, show, latitude, longtitude) {
        var $ = this;
        var ico = $.icon();
        var point = new GPoint(longtitude, latitude);
        var marker = new GMarker(point, ico);
        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
        });
        $.Map.addOverlay(marker);
        if (show) marker.openInfoWindowHtml(html);
        return marker;
    },
    init: function() {
        var $ = this;
        if (!$.Container) {
            alert('容器不存在！');
            return;
        }
        var o = document.getElementById($.Container);
        if (!o) {
            alert('容器不存在！');
            return;
        }
        $.obj = o;
        $.iconOr = GoogleMap.icon = $.icon();
        $.loadMap();
        $.createMarker($.Html, true, $.Latitude, $.Longtitude);
        o.parentNode.style.width = $.Width + 'px';
        if ($.AllowSearch) {
            $.Geocoder = new GClientGeocoder();
            var s = document.createElement('p');
            o.appendChild(s);
            var k = document.createElement('input');
            k.setAttribute('type', 'text');
            k.style.cssText = 'border:1px solid #a5bfdd;width:{0}px;height:16px;margin-top:10px'.format($.Width - 50);
            var d = document.createElement('input');
            d.setAttribute('type', 'button');
            d.style.cssText = 'border:1px solid #a5bfdd;width:40px;float:right;height:20px;margin-top:10px;cursor:pointer;background:#b1d5ff';
            d.value = '搜索';
            var r = document.createElement('p');
            r.style.cssText = 'margin-top:10px';
            r.setAttribute('id', 'search{0}'.format($.Id));
            o.appendChild(r);
            s.appendChild(d);
            s.appendChild(k);
            $.result = r;
            d.onclick = function() {
                if (k.value.empty()) {
                    alert('请输入关键字！');
                    return;
                }
                $.Geocoder.getLocations(k.value.trim(), function(result) {
                    if (result.Status.code != G_GEO_SUCCESS) return; ;
                    var icon = new GIcon(G_DEFAULT_ICON);
                    var lat, lng, point, address, marker;
                    for (var i = 0; i < result.Placemark.length; i++) {
                        lat = result.Placemark[i].Point.coordinates[1]; // lat
                        lng = result.Placemark[i].Point.coordinates[0]; // lng
                        address = result.Placemark[i].address; // 地址
                        point = new GLatLng(lat, lng);
                        point = point.toString().replace('(', '').replace(')', '');
                        r.innerHTML = (address + " <small>" + point.toString() + "</small><br />");
                        var myCenter = new GPoint(lat, lng);
                        $.Map.centerAndZoom(myCenter, 8);
                        $.createMarker(address.replace(/,/g, '<br />'), false, lat, lng);
                        var lati = document.getElementById('Latitude');
                        var lont = document.getElementById('Longtitude');
                        if (lati) lati.value = lat;
                        if (lont) lont.value = lng;
                    }
                })
            };
        }
    }
}

使用方法

var map = new GoogleMap({
    //地图宽度
    Width: 600,
    //地图高度
    Height: 500,
    //纬度
    Latitude: 42.648486,
    //经度
    Longtitude: -71.134868,
    //是否带搜索
    Search: true,
    //地图支持滚轮
    ScrollWheelZoom: true,
    //带有可在四个方向平移、放大、缩小的按钮，以及缩放滑块的控件
    LargeMapControl: true,
    //带有切换地图类型的按钮的控件
    MapTypeControl: true,
    //右下角小地图
    OverviewMap:true,
    //标注的HTML
    Html: 'Phillips Academy Andover',
    //地图容器ID
    Container: 'xx'
});

多个标注

map.createMarker('North Reading', false, 42.5750833, -71.0854325);
map.createMarker('xxx Reading', false, 42.5750833, -71.2854325);

HTML

    经度:<input id="Latitude" type="text" /> 纬度:<input id="Longtitude" type="text" />
    <div id="xx"></div>

这是我一个项目中专用的需求.非通用.欢迎拍砖

本文为原创,虽然是垃圾代码,转载时请注明出处.谢谢

点我演示

转载于:https://www.cnblogs.com/chaige/archive/2011/08/12/google-map.html