谷歌翻拉取别的分支_如何将品牌分支机构的位置添加到Google地图-优快云博客

谷歌翻拉取别的分支

计划

在本教程中，我们将逐步为虚构的客户创建品牌的Google地图。我们的地图将包含三个关键特征：

客户每个分支机构的自定义标记
客户的徽标在地图上的固定位置
地图主题与客户的品牌形象相称

在这种情况下，我们的假想客户将是“ The Hobby Shoppe”，这是澳大利亚墨尔本市周围精美棋盘游戏和其他业余爱好用具的供应商。

创建底图

我们将通过创建一个以墨尔本市为中心的基本地图来推动这一发展。添加分支标记后，我们将细化地图的中心位置，但是现在，我们将从找到合适的纬度和经度开始，以显示整个城市。

初始纬度和经度

为此，请转到Google地图并搜索Melbourne ，然后稍微放大一点，这样就不会出现人口稠密的地区。调整地图位置时，您会注意到URL发生变化，以反映新的纬度，经度和缩放级别。将地图放置在所需位置后，将URL复制到某处以供以后参考，例如：

https://www.google.com/maps/place/墨尔本+ VIC / @-37.804627 ...

在网址中的@符号之后，您会看到纬度，经度和缩放级别的逗号分隔值： -37.8046274,144.972156,12z

第一个值-37.8046274是纬度，第二个值144.972156是经度，并且12z值表示将缩放级别设置为12 。现在，我们将这些值插入基本映射。

基本标记

创建一个空白HTML文档并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      .wrap { max-width: 75em; min-height: 40em; height:100%; width:100%; margin: 0 auto; padding-top: 2.5%;}
      #map-canvas { height: 90%; }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true">
    </script>
    <script type="text/javascript">
      var map;
      var centerPos = new google.maps.LatLng(-37.8046274,144.972156);
      var zoomLevel = 12;
      function initialize() {
        var mapOptions = {
          center: centerPos,
          zoom: zoomLevel
        };
        map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions );
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
  <div class="wrap">
    <div id="map-canvas"></div>
  </div>
  </body>
</html>

通过此标记，我们创建了一个HTML文档，其中包括一个带有ID map-canvas的div ，它将保存我们的地图。我们还添加了一些基本CSS来调整map-canvas div的大小和位置。

最后，我们从Google Map API加载了所需的脚本，其中包括：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>

并且我们创建了一个JavaScript函数来设置地图的基本选项并将其加载到我们的空div中。

<script type="text/javascript">
  var map;
  var centerPos = new google.maps.LatLng(-37.8046274,144.972156);
  var zoomLevel = 12;
  function initialize() {
    var mapOptions = {
      center: centerPos,
      zoom: zoomLevel
    };
    map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions );
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

注意：请参阅我们先前从Google Maps URL获取的值如何在centerPos和zoomLevel变量中使用，这些变量又在mapOptions数组中使用。 centerPos变量使用逗号分隔的纬度和经度值-37.8046274,144.972156 ，而zoomLevel变量使用值12 。

保存HTML文件，然后在任何浏览器中打开它。您的基本地图应如下所示：

添加分支位置标记

下一步是找到客户每个分支位置的纬度和经度，因此我们可以在这些位置为其创建标记。最简单的方法是通过Google Maps搜索找到每个分支机构的地址，然后从中获取经度和纬度。

查找每个分支的经度和纬度

再次返回Google地图，并搜索每个分支机构的位置。假设客户已为您提供了每个位置的地址，您只需搜索该地址，地图上就会显示一个标记。右键单击该标记，然后选择“这里是什么？” 从上下文菜单中。

一个小弹出窗口将出现在地图的左上方，显示此标记的详细信息，包括纬度和经度：

将位置添加到初始化功能

记下要添加到地图中的每个分支位置的纬度和经度。在“ The Hobby Shoppe”的情况下，我们有七个分支位置，我们将通过在地图的initialize()函数末尾在map = new google.maps.Map...之后插入以下代码来为每个分支添加标记map = new google.maps.Map...行：

var locations = [
  ['First Shoppe', -37.808204, 144.855579],
  ['Second Shoppe', -37.675648, 145.026125],
  ['Third Shoppe', -37.816935, 144.966877],
  ['Fourth Shoppe', -37.818714, 145.036494],
  ['Fifth Shoppe', -37.793834, 144.987018],
  ['Sixth Shoppe', -37.737116, 144.998581],
  ['Seventh Shoppe', -37.765528, 144.922624]
];

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    title: locations[i][0],
    map: map
  });
}

在此代码中，我们首先创建一个分支位置数组，每个分支位置的名称，纬度和经度。然后，我们遍历该数组以将每个位置作为标记添加到地图，如果标记悬停在上方，则标题将显示为工具提示。

现在，您的地图应该添加了标记，如下所示：

但是，等等，这张图片有问题。我们添加了七个位置，但仅出现了六个标记。为什么？

这仅仅是因为根据为地图设置的初始纬度和经度，我们的第七个标记不在视线范围内，因此我们需要优化该中心位置。

调整地图中心位置

现在我们已经放置了所有标记，我们可以优化地图的起始位置，以确保它们在加载时都可见。为此，我们将添加一个按钮，一旦找到理想的地图起始位置，就可以单击该按钮以提供新的坐标。

在body部分的任何位置，将此按钮代码添加到您的页面：

<button onclick="console.log( 'Lat &amp; Long: ' + map.getCenter().k + ',' + map.getCenter().A + ' Zoom: ' + map.getZoom() );">Get Map Co-ords</button>

现在，您可以移动地图，然后在找到正确的位置时单击新的“ 获取地图坐标”按钮。

您位置的纬度，经度和缩放级别将被写入控制台，因此请确保您已打开Chrome开发工具或Firebug控制台。

使用新的纬度和经度以及zoom选项（如果也进行了更改）更新地图的center选项：

var mapOptions = {
  center: new google.maps.LatLng(-37.74723337588968,144.961341333252),
  zoom: 12
};

保存并刷新地图，现在所有七个地图标记都应该可见。当您对精确的中心位置感到满意时，可以删除“ 获取地图坐标”按钮代码。

添加自定义标记图像

现在，我们已经将所有标记放置在适当的位置并且对分支位置可见，我们将其转换为自定义图像，该图像与客户品牌和地图样式一起出现。创建的用作地图标记的任何图像都应具有透明背景，例如

将您的自定义标记放置在相对于基础地图所在文件夹的“图像”文件夹中，然后将以下变量直接添加到您先前创建的locations变量下：

var image = 'images/shoppe_icon.png';

然后将icon: image的额外选项添加到我们之前创建的放置地图标记的for循环中。将此变量传递到地图标记生成选项中，指定您希望将标记图标替换为自定义图像：

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    title: locations[i][0],
    map: map,
    icon: image
  });
}

再次查看您的地图，您现在应该在七个分支位置的每个位置看到小房子：

添加客户徽标

现在，我们将以这样一种方式添加客户的徽标：无论地图被缩放或平移到什么位置，该徽标都将保持相同的大小和位置。

Google Map唯一不随平移和缩放而移动的元素是控件UI元素，通常用于吸引街景或切换地图类型之类的事情。但是，我们可以很好地使用自定义控件API在屏幕上放置徽标。我们还将让我们的新自定义控件在单击时重置地图的缩放和中心位置，并显示其执行有用的UI功能的徽标。

首先，将客户的徽标图像添加到放置自定义标记图像的同一“图像”文件夹中。然后在现有的initialize()函数之前添加以下JavaScript函数：

function LogoControl(controlDiv, map) {

  controlDiv.style.padding = '5px';

  var controlUI = document.createElement('div');
  controlUI.style.backgroundImage = 'url(images/logo.png)';
  controlUI.style.width = '600px';
  controlUI.style.height = '116px';
  controlUI.style.cursor = 'pointer';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);

  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(centerPos)
    map.setZoom(zoomLevel)
  });

}

执行此功能时，将使用徽标图像作为背景，创建大小为600px x 116px的控件UI元素。它还将创建一个侦听器，如果单击徽标，它将重置地图的中心和缩放。

然后，在您的initialize()函数末尾，插入以下代码：

var logoControlDiv = document.createElement('div');
var logoControl = new LogoControl(logoControlDiv, map);

logoControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(logoControlDiv);

现在，当initialize()函数运行时，它将调用刚刚创建的LogoControl()函数，并将其输出添加到地图控件中。

您的地图现在应如下所示：

为地图着色

要设置地图的颜色，您几乎肯定会想要使用Google的样式化地图向导，以便对您的选择获得快速的视觉反馈。

向导中的“ 要素类型”菜单为您提供了一系列可用于样式设置的地图组件。它们的组织方式从最一般到最具体。在最一般的级别上，您可以将颜色选择应用于“ 所有”要素类型，以平均影响地图上的所有内容。在频谱的另一端，例如，可以像“ 全部”>“公交”>“车站”>“公交车”一样向下钻取。

选择要素类型后，您还可以从“ 元素类型”菜单中进行选择，以确定您是否希望颜色选择影响要素的几何形状或其标签（例如，您看到的漂浮在地图上的小文本标签）。此外，您还可以选择填充或描边颜色进行修改。

在选择颜色时，您需要处理两个主要方面：颜色面板和色相面板。 “ 颜色”面板将对您选择的特征和元素均匀地应用颜色十六进制代码，而“ 色相”面板将根据每个元素的原始颜色影响的明暗范围为您的选择着色。

通常，应该从对地图的最普通级别应用色相开始，以便在配色方案中具有一定的一致性-您可以将其与底漆进行比较。然后，您可以在此处使用平面颜色设置向下钻取以“绘画”顶部，以获取更多特定功能和元素。

我们的地图

首先在向导中搜索“墨尔本”，然后定位预览地图，以向您显示与设置自己的地图大致相同的区域。

在向导的“ 特征类型”菜单下，选择“ 全部” ，然后在“ 元素类型”菜单下选择“ 几何” 。然后选中“ 色相”框并单击颜色栏，直到获得#ffa200左右的值。由于某些原因，您无法在此字段中直接输入值，因此必须通过单击使其尽可能接近。然后选中“ 反转亮度”框，激活“ 饱和度”设置并将其拖动到35 ，激活“ 亮度”设置并将其放置在50 ，然后激活“ 灰度系数”设置并使其尽可能接近1.3 。

这些设置应为整个地图着色，如下所示：

在此阶段，您的地图看起来有些有趣，因为我们的目标是制作一张彩色地图，因此这里的色调设置已被放大，以确保任何地方都没有遮挡的区域。在后续步骤中，过亮的区域将被更柔和的颜色覆盖。

淡化事物

现在您已经应用了第一种样式，请单击“ 地图样式”面板（位于地图向导的右侧）右上角的“ 添加”按钮。单击此按钮将创建另一个名为“样式1”的样式，您可以在该样式下选择其他元素并应用新样式。

在“ 地图样式”面板中选择“样式1”并且在“ 要素类型”下仍选择“ 全部”后，单击“ 元素类型”菜单第二个列表中的“ 标签”选项。选中“ 色相”框，然后再次将其设置为#ffa200的值，这样您的标签将全部带有色彩，而不是如上图所示的明亮的蓝色或绿色。

单击“ 地图样式”面板上的“ 添加”按钮以创建另一个新样式，然后在“ 要素类型”菜单的第二个列表中单击“ 水” 。在“ 元素类型”菜单下，选择“ 几何体” 。选中颜色框，然后输入#8F9B98颜色十六#8F9B98 。

剩下的风格

现在，您应该知道如何通过选择“ 要素类型”和“ 元素类型”菜单项来创建新样式。继续，在样式化的地图向导中一次添加其余的一种样式：

功能类型：全部
元素类型：所有>标签>文本>填充
颜色： ＃f8ead0

功能类型：全部
元素类型：所有>标签>文本>描边
颜色： ＃6a5035

要素类型：全部>景观>人造
元素类型：全部>几何
颜色： ＃9f8053

要素类型：全部>景观>自然
元素类型：全部>几何
颜色： ＃9c9743

要素类型：全部>兴趣点
元素类型：全部>几何
颜色： ＃ACA74C

要素类型：全部>道路
元素类型：全部>几何>填充
颜色： ＃d3b681

要素类型：全部>道路
元素类型：全部>几何>描边
颜色： ＃644F34

要素类型：全部>道路>动脉
元素类型：全部>几何>填充
颜色： ＃c6a15e

要素类型：全部>道路>本地
元素类型：全部>几何>填充
颜色： ＃b09061

功能类型：全部
元素类型：所有>标签>文本>描边
颜色： ＃483521

要素类型：全部>运输>线路
元素类型：全部>几何
颜色： ＃876b48

要素类型：全部>运输>车站
元素类型：全部>几何
颜色： ＃a58557

导出地图样式

添加所有这些样式后，就可以导出向导创建的设置并将其添加到地图中。在“ 地图样式”面板上，单击底部的“ 显示JSON”按钮。您会看到一个白色的窗口出现，其中显示了一系列JavaScript选项。

复制该窗口中开头[和结尾]之间的所有文本，即除主标题外的所有文本。

在initialize()函数的开头添加以下新行：

var styles = ;

将光标置于;之前; 然后粘贴您从样式地图向导复制的代码。您应该最终得到：

var styles = [
  {
    "elementType": "geometry",
    "stylers": [
      { "hue": "#ffa200" },
      { "invert_lightness": true },
      { "lightness": 50 },
      { "saturation": 35 },
      { "gamma": 1.31 }
    ]
  },{
    "elementType": "labels",
    "stylers": [
      { "hue": "#ffa200" }
    ]
  },{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      { "color": "#8F9B98" }
    ]
  },{
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#f8ead0" }
    ]
  },{
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#6a5035" }
    ]
  },{
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      { "color": "#9c9743" }
    ]
  },{
    "featureType": "landscape.man_made",
    "elementType": "geometry",
    "stylers": [
      { "color": "#9f8053" }
    ]
  },{
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      { "color": "#ACA74C" }
    ]
  },{
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#d3b681" }
    ]
  },{
    "featureType": "road",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#644F34" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#c6a15e" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#b09061" }
    ]
  },{
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      { "color": "#876b48" }
    ]
  },{
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      { "color": "#a58557" }
    ]
  }
];

然后在initialize()函数的最后添加以下三行：

var styledMap = new google.maps.StyledMapType( styles, {name: "Styled Map"} );
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

这些代码行将您刚刚从样式地图向导中提取的所有配色方案数据应用于地图。再看一遍，它现在应该随您所有的样式选择一起出现：

请查看实时演示，以便您可以按适当的尺寸查看地图，并在此处进行缩放和平移。

结语

最后，您可能还希望在地图周围添加框架效果，以进一步完善样式。使用以下代码替换文件中现有的#map-canvas { ... } CSS：

#map-canvas { 
  height: 90%;
  border: 5px solid #33210f;
  -moz-box-shadow: 0 3px 3px 3px rgba(0,0,0,0.9), 0 0 0 3px #000;
  -webkit-box-shadow: 0 3px 3px 3px rgba(0,0,0,0.9), 0 0 0 3px #000;
  box-shadow: 0 3px 3px 3px rgba(0,0,0,0.9), 0 0 0 3px #000;
}

如您所见，使用Google Maps可以做很多事情，而不仅仅是基本的嵌入。在本教程中，我们仍然仅探讨了Google Maps API的两个方面-您可以在Google Map帮助文档中了解有关API提供的所有其他功能的更多信息。

如果您想进一步学习本教程，还可以尝试添加自己的自定义样式的缩放和平移控件（自定义控件文档），并创建单击标记时弹出的信息窗口。这些弹出窗口可能包含电话号码和街道地址之类的详细信息（信息窗口docs ）。

下次客户要求您在其站点中包含Google Map时，请尝试使用这些技术。您可能只会获得奖金！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-add-branded-branch-locations-to-google-maps--cms-20457

谷歌翻拉取别的分支