如下利用 Google Map Api ------ 简单实现地图网站应用。(仅参考)
实现目标:
1.在地图中进行地点标注
2.选择标注时,出现相关信息
3.点击页面上的测试按钮,显示相关的地点标注信息
Html Code:
- <body >
- <h1>Google Map</h1>
- <div id="Googlemap" style=" 70%; height: 480px; float: left; border: 1px solid black;">
- </div>
- <input type="button" id="btnTest" title="test" value="显示第二店信息" />
- </body>
前期准备:
注册Google Api Key
引用Google Api 脚本
- <script language="javascript" type="text/javascript" src=http://ditu.google.com/maps?file=api&v=2&key=XXX></script>
在地图中进行地点标注
如果要实现地点标注,首先要准备数据
数据如下:
- var message = [
- { "X": "31.223822", "Y": "121.336311", "Content": { "Title": "别克4s店", "Context": "北翟路1571号"} },
- { "X": "31.175449", "Y": "121.395134", "Content": { "Title": "别克4s店", "Context": "虹梅路1601号"} },
- { "X": "31.095711", "Y": "121.456276", "Content": { "Title": "别克4s店", "Context": "龙吴路"} },
- { "X": "31.078356", "Y": "121.395607", "Content": { "Title": "别克4s店", "Context": "沪闵路"} },
- { "X": "31.200939", "Y": "121.365707", "Content": { "Title": "别克4s店", "Context": "哈密路1231号"} }
- ];
然后调用
addOverlay(overlay:GOverlay) 将叠加层添加到地图中,并触发 addoverlay 事件。
- var point = new GLatLng(X, Y);
- var newMkr = GMaps.prototype.CreateMarker(point, i);
- map.addOverlay(newMkr);
选择标注时,出现相关信息
在标注点上显示相关信息,需要调用openInfoWindowHtml。
- openInfoWindowHtml(content:String, opts?:GInfoWindowOptions)
通过标记图标打开地图信息窗口。信息窗口的内容为包含 HTML 文本的字符串。只适用于 GInfoWindowOptions.maxWidth 选项。
点击页面上的测试按钮,显示相关的地点标注信息
实现这点只需要定义一个Trigger即可
- GEvent.trigger(XX, "click");
代码解析:(看看注释即可)
- var message = [
- { "X": "31.223822", "Y": "121.336311", "Content": { "Title": "别克4s店", "Context": "北翟路1571号"} },
- { "X": "31.175449", "Y": "121.395134", "Content": { "Title": "别克4s店", "Context": "虹梅路1601号"} },
- { "X": "31.095711", "Y": "121.456276", "Content": { "Title": "别克4s店", "Context": "龙吴路"} },
- { "X": "31.078356", "Y": "121.395607", "Content": { "Title": "别克4s店", "Context": "沪闵路"} },
- { "X": "31.200939", "Y": "121.365707", "Content": { "Title": "别克4s店", "Context": "哈密路1231号"} }
- ];
- var GMaps = function() {
- };
- GMaps.prototype = {
- //定义标记容器
- makers: [],
- //定义鹰眼图标
- SetIcon: function(index) {
- var markerIcon = new GIcon();
- markerIcon.image = "../Images/" + index + ".png";
- return markerIcon;
- },
- //设置地图中心
- SetCenter: function(lats, lngs) {
- var maxLat = Math.max.apply(null, lats),
- maxLng = Math.max.apply(null, lngs),
- minLat = Math.min.apply(null, lats),
- minLng = Math.min.apply(null, lngs),
- lat = minLat + (maxLat - minLat) / 2,
- lng = minLng + (maxLng - minLng) / 2,
- //定义缩放率
- bounds = new GLatLngBounds(new GLatLng(minLat, minLng), new GLatLng(maxLat, maxLng));
- map.setCenter(new GLatLng(lat, lng), map.getBoundsZoomLevel(bounds));
- },
- //定义标记内容
- CreateMarker: function(latlng, index) {
- if (!latlng) return;
- var marker = new GMarker(latlng, { icon: GMaps.prototype.SetIcon(index) });
- marker.id = index;
- GEvent.addListener(marker, "click", function() {
- var myHtml = new Array();
- myHtml.push("<span id=\"Info\">");
- myHtml.push("<h2>" + message[index].Content.Title + "</h2><br />");
- myHtml.push(message[index].Content.Context + "<br />");
- myHtml.push("</span>");
- map.openInfoWindowHtml(latlng, myHtml.join(''));
- });
- return marker;
- },
- //设置触发标记内容显示
- TriggerMaker: function(maker) {
- GEvent.trigger(maker, "click");
- },
- //创建地图
- BuildMap: function(map) {
- //判断当前浏览器是否支持google 地图
- if (GBrowserIsCompatible()) {
- //定义经纬度容器
- var lats = [], lngs = [];
- //从地图中删除所有叠加层
- map.clearOverlays();
- $.each(message, function(i) {
- var point = new GLatLng(message[i].X, message[i].Y);
- var newMkr = GMaps.prototype.CreateMarker(point, i);
- if (newMkr) {
- //存储当前Maker到Makers中,用于在地图之外进行选择
- GMaps.prototype.makers.push(newMkr);
- (function(map, newMkr) {
- //将叠加层添加到地图中
- map.addOverlay(newMkr);
- })(map, newMkr);
- }
- //存储所有经纬度用于计算当前显示区域
- lats.push(message[i].X);
- lngs.push(message[i].Y);
- });
- //设置地图中心区域
- GMaps.prototype.SetCenter(lats, lngs);
- map.enableDoubleClickZoom();
- map.enableScrollWheelZoom();
- map.enableContinuousZoom();
- map.addControl(new GLargeMapControl())
- map.addControl(new GOverviewMapControl());
- map.addControl(new GScaleControl());
- map.addControl(new GMapTypeControl());
- }
- else {
- alert("No Support Google Map");
- }
- }
- }
最后调用代码:
- var map = new GMap2(document.getElementById("Googlemap"));
- var mapView = new GMaps();
- mapView.BuildMap(map);
- $(function() {
- $("input[id=btnTest]").click(function() {
- mapView.TriggerMaker(mapView.makers[1]);
- if (document.documentElement.scrollTop > 250) document.documentElement.scrollTop = 170;
- });
- });
最终实现效果:
最终实现效果:
Google 地图 API 开发指南
http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html
转自: http://www.aspxcs.net/HTML/1227231018.html
www.aitaowang8.com