README

##介绍

几乎完全重写的这个扩展是EGMap的新版本。我决定将其作为新版本包括进来，因为这个版本打破了向后兼容性。我这样做是为了实施一种更类似于Yii风格的不同方法。

在新代码中，还可能进行大量的代码清理，使类更加紧凑。

现在，魔法获取器和设置器允许使用预先命名为set或get的选项和函数，类似于属性，与CComponent类似。

本版本包含（包括所有之前的EGMap库）

• LatLonControl

• DragKeyZoom Control

• MarkerWithLabel Control

• Clusterer Marker支持

• KML支持（它还包括EGMapKMLFeed库，该库是为了提供创建KML文档的简单方法而创建的）

• 高度路径

• 折线

• 矩形

• 圆形

• 多边形

• 交通和骑行图层支持

• 动画支持

TODO 列表

• 地面叠加
• AJAX标记渲染功能

注意：关于此扩展之前版本的详细信息在此Yii论坛帖子上

变更日志

• 19-12-2011 添加EGMapPolylineEncoder以编码多边形路径和Elevation API v3支持
• 19-12-2011 通过Matt Cheale更新地理位置从V2到V3 API
• 19-12-2011 修复反向地理编码信息错误
• 17-12-2011 修复了一个小而愚蠢的错误
• 17-12-2011 添加了多边形、矩形和圆形支持[由Matt Kay提供]
• 16-12-2011 修复了CURL open_basedir限制和添加了标记动画
• 23-11-2011 修复了IE 8加载错误（感谢ghadad）
• 12-10-2011 代码改进：添加了InfoBox支持，包含一个反向地理编码类工具，带有选项以在中心更改时更新表单字段。
• 23-03-2011 将反向地理编码从v2更新到v3（检查Google Code SVN Repository）
• 20-03-2011 包含了多边形支持（检查Google Code SVN Repository）
• 11-02-2011 包含了语言和地区地图的支持
• 11-02-2011 包含了addDOMEventListenerOnce和addEventListenerOnce的支持（感谢Johnatan）
• 03-02-2011 修复了registerPlugin函数上的小错误（感谢Rangel Reale）

使用方法

解压zip文件内容并将其放置在您的受保护/扩展文件夹中。 此包中的EGMap库文件夹命名为EGMAP，因此请确保您阅读了 https://yiiframework.cn/doc/api/1.1/YiiBase#import-detail，以清楚地了解如何正确设置文件夹的扩展。

标记和带标签的标记

以下示例向您展示如何使用标记和带标签的标记。它还展示了如何启用默认标记簇集器

//
// ext is your protected.extensions folder
// gmaps means the subfolder name under your protected.extensions folder
//  
Yii::import('ext.gmap.*');

$gMap = new EGMap();
$gMap->zoom = 10;
$mapTypeControlOptions = array(
  'position'=> EGMapControlPosition::LEFT_BOTTOM,
  'style'=>EGMap::MAPTYPECONTROL_STYLE_DROPDOWN_MENU
);

$gMap->mapTypeControlOptions= $mapTypeControlOptions;
	
$gMap->setCenter(39.721089311812094, 2.91165944519042);
	 
// Create GMapInfoWindows
$info_window_a = new EGMapInfoWindow('<div>I am a marker with custom image!</div>');
$info_window_b = new EGMapInfoWindow('Hey! I am a marker with label!');

$icon = new EGMapMarkerImage("http://google-maps-icons.googlecode.com/files/gazstation.png");

$icon->setSize(32, 37);
$icon->setAnchor(16, 16.5);
$icon->setOrigin(0, 0);
	
// Create marker
$marker = new EGMapMarker(39.721089311812094, 2.91165944519042, array('title' => 'Marker With Custom Image','icon'=>$icon));
$marker->addHtmlInfoWindow($info_window_a);
$gMap->addMarker($marker);
	
// Create marker with label
$marker = new EGMapMarkerWithLabel(39.821089311812094, 2.90165944519042, array('title' => 'Marker With Label'));

$label_options = array(
  'backgroundColor'=>'yellow',
  'opacity'=>'0.75',
  'width'=>'100px',
  'color'=>'blue'
);

/*
// Two ways of setting options
// ONE WAY:
$marker_options = array(
  'labelContent'=>'$9393K',
  'labelStyle'=>$label_options,
  'draggable'=>true,
  // check the style ID 
  // afterwards!!!
  'labelClass'=>'labels',
  'labelAnchor'=>new EGMapPoint(22,2),
  'raiseOnDrag'=>true
);

$marker->setOptions($marker_options);
*/

// SECOND WAY:
$marker->labelContent= '$425K';
$marker->labelStyle=$label_options;
$marker->draggable=true;
$marker->labelClass='labels';
$marker->raiseOnDrag= true;
	
$marker->setLabelAnchor(new EGMapPoint(22,0));
	
$marker->addHtmlInfoWindow($info_window_b);
	
$gMap->addMarker($marker);

// enabling marker clusterer just for fun
// to view it zoom-out the map
$gMap->enableMarkerClusterer(new EGMapMarkerClusterer());

$gMap->renderMap();

样式

.labels {  
   color: red;  
   background-color: white;  
   font-family: "Lucida Grande", "Arial", sans-serif;  
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   width: 40px;     
   border: 2px solid black;
   white-space: nowrap;
}

KML服务

由于KML是从Google服务中读取的服务，您不能使用localhost KML文件，为此，您需要在enableKMLService函数中指定它是localhost KML文件，并且geoxml3.js插件应自动注册。

Yii::import('ext.gmap.*');

$gMap = new EGMap();
// using the new magic setters
// check available options per class
// objects with setMethod,getMethod and
// options array can be set now this way
$gMap->zoom = 10;
$mapTypeControlOptions = array(
   // yes we can position the controls now
   // where we want
   'position'=> EGMapControlPosition::LEFT_BOTTOM,
   'style'=>EGMap::MAPTYPECONTROL_STYLE_DROPDOWN_MENU
);

$gMap->mapTypeControlOptions= $mapTypeControlOptions;

// enabling KML Service. Second parameter of this 
// function tells whether is localhost or not. GeoXML3.js 
// is needed to read localhost KML files.
$gMap->enableKMLService('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml');

$gMap->renderMap(); 

方向示例

如何处理方向和航点。

Yii::import('ext.gmap.*');
$gMap = new EGMap();

$gMap->setWidth(512);
// it can also be called $gMap->height = 400;
$gMap->setHeight(400);
$gMap->zoom = 8; 

// set center to inca
$gMap->setCenter(39.719588117933185, 2.9087440013885635);

// my house when i was a kid
$home = new EGMapCoord(39.720991014764536, 2.911801719665541);

// my ex-school
$school = new EGMapCoord(39.719456079114956, 2.8979293346405166);

// some stops on the way
$santo_domingo = new EGMapCoord(39.72118906848983, 2.907628202438368);
$plaza_toros  = new EGMapCoord(39.71945607911511, 2.9049245357513565);
$paso_del_tren = new EGMapCoord( 39.718762871171776, 2.903637075424208 );

// Waypoint samples
$waypoints = array(
      new EGMapDirectionWayPoint($santo_domingo),
      new EGMapDirectionWayPoint($plaza_toros, false),
      new EGMapDirectionWayPoint($paso_del_tren, false)
    );

// Initialize GMapDirection
$direction = new EGMapDirection($home, $school, 'direction_sample', array('waypoints' => $waypoints));

$direction->optimizeWaypoints = true;
$direction->provideRouteAlternatives = true;

$renderer = new EGMapDirectionRenderer();
$renderer->draggable = true;
$renderer->panel = "direction_pane";
$renderer->setPolylineOptions(array('strokeColor'=>'#FFAA00'));

$direction->setRenderer($renderer);

$gMap->addDirection($direction);

$gMap->renderMap();  

KeyDragZoom示例

如何使用KeyDragZoom插件。当您使用以下示例时，请检查缩放控件下的放大镜或按Shift键以启用Key Drag Zoom。

Yii::import('ext.gmap.*');

$gMap = new EGMap();
$gMap->zoom = 8;
// set center to inca
$gMap->setCenter(39.719588117933185, 2.9087440013885635); 
$gMap->width = 400;
$gMap->height = 400;
// Enable Key Drag Zoom
$zoom_options = array(
  'visualEnabled'=>true,
  'boxStyle'=>array(
   'border'=>'4px dashed black', // strings with double quoted inside!
   'backgroundColor'=>'transparent',
   'opacity'=>1.0
  ),
  'veilStyle'=>array(
    'backgroundColor'=>'red',
    'opacity'=>0.35,
    'cursor'=>'crosshair'
  ));

$drag_Zoom = new EGMapKeyDragZoom($zoom_options);

$gMap->enableKeyDragZoom($drag_Zoom);

$gMap->renderMap();

更高级的示例

其中$map是数据库表的模型，用于保存标记点的坐标。由Johnatan提供的示例

Yii::import('ext.gmap.*');
$gMap = new EGMap();
$gMap->setWidth(880);
$gMap->setHeight(550);
$gMap->zoom = 6;
$mapTypeControlOptions = array(
  'position' => EGMapControlPosition::RIGHT_TOP,
  'style' => EGMap::MAPTYPECONTROL_STYLE_HORIZONTAL_BAR
);

$gMap->mapTypeId = EGMap::TYPE_ROADMAP;
$gMap->mapTypeControlOptions = $mapTypeControlOptions;

// Preparing InfoWindow with information about our marker.
$info_window_a = new EGMapInfoWindow("<div class='gmaps-label' style='color: #000;'>Hi! I'm your marker!</div>");

// Setting up an icon for marker.
$icon = new EGMapMarkerImage("http://google-maps-icons.googlecode.com/files/car.png");

$icon->setSize(32, 37);
$icon->setAnchor(16, 16.5);
$icon->setOrigin(0, 0);

// Saving coordinates after user dragged our marker.
$dragevent = new EGMapEvent('dragend', "function (event) { $.ajax({
                                            'type':'POST',
                                            'url':'".$this->createUrl('catalog/savecoords').'/'.$items->id."',
                                            'data':({'lat': event.latLng.lat(), 'lng': event.latLng.lng()}),
                                            'cache':false,
                                        });}", false, EGMapEvent::TYPE_EVENT_DEFAULT);

// If we have already created marker - show it
if ($map) {

    $marker = new EGMapMarker($map->lat, $map->lng, array('title' => Yii::t('catalog', $items->type->name),
            'icon'=>$icon, 'draggable'=>true), 'marker', array('dragevent'=>$dragevent));
    $marker->addHtmlInfoWindow($info_window_a);
    $gMap->addMarker($marker);
    $gMap->setCenter($map->lat, $map->lng);
    $gMap->zoom = 16;

// If we don't have marker in database - make sure user can create one
} else {
    $gMap->setCenter(38.348850, -0.477551);

    // Setting up new event for user click on map, 
    // so marker will be created on place and respectful event added.
    $gMap->addEvent(new EGMapEvent('click',
            'function (event) {var marker = new google.maps.Marker({position: event.latLng, map: '.$gMap->getJsName().
            ', draggable: true, icon: '.$icon->toJs().'}); '.$gMap->getJsName().
            '.setCenter(event.latLng); var dragevent = '.$dragevent->toJs('marker').
            '; $.ajax({'.
              '"type":"POST",'.
              '"url":"'.$this->createUrl('catalog/savecoords')."/".$items->id.'",'.
              '"data":({"lat": event.latLng.lat(), "lng": event.latLng.lng()}),'.
              '"cache":false,'.
            '}); }', false, EGMapEvent::TYPE_EVENT_DEFAULT_ONCE));
}
$gMap->renderMap(array(), Yii::app()->language);

信息框示例

InfoBox是一个酷插件，允许您修改地图的信息窗口。

Yii::import('site.common.components.egmap.*');

$gMap = new EGMap();
$gMap->setJsName('test_map');
$gMap->width = '100%';
$gMap->height = 300;
$gMap->zoom = 8;
$gMap->setCenter(39.737827146489174, 3.2830574338912477);

$info_box = new EGMapInfoBox('<div style="color:#fff;border: 1px solid black; margin-top: 8px; background: #000; padding: 5px;">I am a marker with info box!</div>');

// set the properties
$info_box->pixelOffset = new EGMapSize('0','-140');
$info_box->maxWidth = 0;
$info_box->boxStyle = array(
	'width'=>'"280px"',
	'height'=>'"120px"',
	'background'=>'"url(http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/examples/tipbox.gif) no-repeat"'
);
$info_box->closeBoxMargin = '"10px 2px 2px 2px"';
$info_box->infoBoxClearance = new EGMapSize(1,1);
$info_box->enableEventPropagation ='"floatPane"';

// with the second info box, we don't need to 
// set its properties as we are sharing a global 
// info_box
$info_box2 = new EGMapInfoBox('<div style="color:#000;border: 1px solid #c0c0c0; margin-top: 8px; background: #c0c0c0; padding: 5px;">I am a marker with info box 2!</div>');
// Create marker
$marker = new EGMapMarker(39.721089311812094, 2.91165944519042, array('title' => 'Marker With Info Box'));
// add two 
$marker2 = new EGMapMarker(39.721089311812094, 2.81165944519042, array('title' => 'Marker With Info Box 2'));
$marker->addHtmlInfoBox($info_box);
$marker2->addHtmlInfoBox($info_box2);

$gMap->addMarker($marker);
$gMap->addMarker($marker2);

$gMap->renderMap();

###矩形示例

Yii::import('site.common.components.egmap.*');

$gMap = new EGMap();
$gMap->setJsName('test_map');
$gMap->width = '100%';
$gMap->height = 300;
$gMap->zoom = 4;
$gMap->setCenter(25.774252, -80.190262);

$bounds = new EGMapBounds(new EGMapCoord(25.774252, -80.190262),new EGMapCoord(32.321384, -64.75737) );
$rec = new EGMapRectangle($bounds);
$rec->addHtmlInfoWindow(new EGMapInfoWindow('Hey! I am a rectangle!'));

$gMap->addRectangle($rec);

$gMap->renderMap();

###圆形示例

[php]
Yii::import('site.common.components.egmap.*');

$gMap = new EGMap();
$gMap->setJsName('test_map');
$gMap->width = '100%';
$gMap->height = 300;
$gMap->zoom = 4;
$gMap->setCenter(34.04924594193164, -118.24104309082031);


$circle = new EGMapCircle(new EGMapCoord(34.04924594193164, -118.24104309082031));
$circle->radius = 300000;
$circle->addHtmlInfoWindow(new EGMapInfoWindow('Hey! I am a circle!'));
$gMap->addCircle($circle);

$gMap->renderMap();

###多边形示例

[php]
Yii::import('site.common.components.egmap.*');

$gMap = new EGMap();
$gMap->setJsName('test_map');
$gMap->width = '100%';
$gMap->height = 300;
$gMap->zoom = 4;
$gMap->setCenter(25.774252, -80.190262);

$coords = array(
       new EGMapCoord(25.774252, -80.190262),
       new EGMapCoord(18.466465, -66.118292),
       new EGMapCoord(32.321384, -64.75737),
       new EGMapCoord(25.774252, -80.190262)
);

$polygon = new EGMapPolygon($coords);
$polygon->addHtmlInfoWindow(new EGMapInfoWindow('Hey! I am a polygon!'));
$gMap->addPolygon($polygon);

$gMap->renderMap();

###反向地理编码示例

Yii::import('site.common.components.egmap.*');

$gMap = new EGMap();
$gMap->setWidth(500);
$gMap->setHeight(400);
$gMap->zoom = 5;

$sample_address = 'Czech Republic, Prague, Olivova';

// Create geocoded address
$geocoded_address = new EGMapGeocodedAddress($sample_address);
$geocoded_address->geocode($gMap->getGMapClient());

// Center the map on geocoded address
 $gMap->setCenter($geocoded_address->getLat(), $geocoded_address->getLng());

// Add marker on geocoded address
$gMap->addMarker(
     new EGMapMarker($geocoded_address->getLat(), $geocoded_address->getLng())
);

$gMap->renderMap();

###高程示例

$e = new EGMapElevationInfo(
     array('25.774252, -80.190262',
           '18.466465, -66.118292',
            new EGMapCoord(32.321384, -64.75737), /* we can also use EGMapCoord */
            new EGMapCoord(25.774252, -80.190262)));

$e->elevationRequestJson(new EGMapClient());
$loc =  $e->getLocations();

foreach($loc as $l)
{
	echo $l->lat.'<br/>';
	echo $l->lng.'<br/>';
	echo $l->resolution.'<br/>';
	echo $l->elevation.'<br/>';
	echo '--------------<br/>';
}

跟随

请关注我博客上此扩展的最新动态。我将在那里编写示例并解释其全部功能，以免使本文过于冗长。

我爱我所做的一切，如果您欣赏我的工作，我接受在Gittip上的捐赠。

##资源

• GitHub存储库
• Google Code SVN存储库 -即将弃用
• Google Maps V3参考
• 项目页面
• 论坛帖子
• 对先前版本的参考