Shopify模板Google 地图 API 密钥注

Shopify模板Google 地图 API 密钥注册指南

可以在模版中添加地图分区，以显示您的营业地点。Shopify的许多免费模版都包含可以添加到主页的地图分区。

若要显示地图，您需要注册 Google 地图 API 密钥并将其包括在模版编辑器的地图分区设置中。

备注:Google已宣布更改其地图服务，这些更改于 2018 年 6 月 11 日生效。有关详细信息，请参阅关于新版 Google 地图平台的博客文章公告。

使用 Google 地图平台

使用 Google API 在您的模版中添加地图分区即表示您同意 Google 地图平台服务条款。

2018 年 6 月 11 日，Google 地图平台针对 Google 地图 API 的整理和使用方式进行了诸多更改。使用这些 API 将需要使用 Google 地图平台设置计费帐户。但是，这不一定意味着您将需要按月支付服务的使用费用。您将继续获得每月信用额度，以在阈值范围内涵盖这些服务。

有关定价的详细信息，请参阅 Google 地图平台定价和计费文档。

注册 Google 地图 API 密钥

您可以注册 Google 地图 API 密钥。

步骤：

访问 Google 地图平台页面，并单击开始使用。

选择地点产品，获取使用免费模版地图分区所需的 API。

单击继续。

选择项目步骤需要您提供一个名称才可使用 Google API。创建新名称或选择现有项目。

同意服务条款后，单击下一步。

通过 Google 地图平台创建计费帐户。计费帐户是新版 Google 地图平台的要求。有关详细信息，请参阅 Google 地图平台定价和计费文档。

启用 Google 地图平台后，将新的 Google 地图 API 密钥复制到剪贴板。

将 Google 地图 API 密钥添加到您的模版中

您可以将 Google 地图 API 密钥添加到您的模版中。

步骤：

在 Shopify 后台中，转到在线商店 > 模版。

找到您要编辑的模版，然后点击自定义。

单击分区。

单击添加分区。

单击地图 > 添加。

输入地图信息。在 Google Maps API key（Google 地图 API 密钥）字段中粘贴您的 Google 地图 API 密钥。

单击保存。

如果与 Google 地图平台的 API 通信时出错，则地图将替换为您在模版编辑器中指定的背景图片或颜色。

将 API 访问权限限制为仅您的商店

Google 地图平台会提示您限制对 API 的访问。您的 API 密钥是地图分区的唯一标识符，因此您可以将其访问权限限制为仅您的域名，以便阻止其他人使用您的 API 密钥。

步骤：

转到 Google API 凭据页面。

从菜单中选择您的项目。

选择您在开始编辑时生成的 API 密钥。

在应用程序限制下，单击 HTTP referrers (web sites)（HTTP 推荐人 (网站)），并输入与商店相关联的任何域名，包括 .myshopify.com 域名。例如，如果您具有自定义域名，则输入 https://myCustomDomain.com/* 和 https://shop1.myshopify.com/*。

单击保存。

使用 Google 地图平台的替代方案

如果您想要在自己的网站上显示地图，但不使用 Google 地图平台的服务，则可以在页面上放置嵌入式地图。

嵌入式地图使用 HTML

以上内容属作者个人观点，不代表雨果网立场！如有侵权，请联系我们。

相关推荐：Shopify店铺模板添加网站图标设置教程

、首先注册百度地图开放平台账号

　　注册完之后可以生成自己的密钥

　　http://lbsyun.baidu.com

2、在html页面中引入百度地图js文件

　　http://api.map.baidu.com/api?v=2.0&ak=您的密钥

3、demo实例

3-1、根据输入地名定位（并返回经纬度）

<!DOCTYPE html>

<title>百度地图API</title>

body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

</style>

</head>

<body>

</body>

</html>

// 百度地图API功能

function G(id) {

return document.getElementById(id);

}

var map=new BMap.Map("allmap");

map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用

map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用

var myDrag=new BMapLib.RectangleZoom(map, {

followText: "拖拽鼠标进行操作"

});

myDrag.open(); //开启拉框放大

// myDrag.close(); //关闭拉框放大

map.centerAndZoom("北京",19); // 初始化地图,设置城市和地图级别。

var ac=new BMap.Autocomplete( //建立一个自动完成的对象

{"input" : "suggestId"

,"location" : map

});

ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件

var str="";

var _value=e.fromitem.value;

var value="";

if (e.fromitem.index > -1) {

value=_value.province + _value.city + _value.district + _value.street + _value.business;

}

str="FromItem<br />index=" + e.fromitem.index + "<br />value=" + value;

value="";

if (e.toitem.index > -1) {

_value=e.toitem.value;

value=_value.province + _value.city + _value.district + _value.street + _value.business;

}

str +="<br />ToItem<br />index=" + e.toitem.index + "<br />value=" + value;

G("searchResultPanel").innerHTML=str;

});

var myValue;

ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件

var _value=e.item.value;

myValue=_value.province + _value.city + _value.district + _value.street + _value.business;

G("searchResultPanel").innerHTML="onconfirm<br />index=" + e.item.index + "<br />myValue=" + myValue;

setPlace();

});

function setPlace(){

map.clearOverlays(); //清除地图上所有覆盖物

function myFun(){

var pp=local.getResults().getPoi(0).point; //获取第一个智能搜索的结果

console.log('经度：'+pp.lng, '纬度：'+pp.lat);

map.centerAndZoom(pp, 18);

map.addOverlay(new BMap.Marker(pp)); //添加标注

}

var local=new BMap.LocalSearch(map, { //智能搜索

onSearchComplete: myFun

});

local.search(myValue);

}

</script>

于转载授授权

大数据文摘作品，欢迎个人转发朋友圈，自媒体、媒体、机构转载务必申请授权，后台留言“机构名称+文章标题+转载”，申请过授权的不必再次申请，只要按约定转载即可，但文末需放置大数据文摘二维码。

编译：佘彦遥程序注释：席雄芬校对：丁雪

Folium是建立在Python生态系统的数据整理（Datawrangling）能力和Leaflet.js库的映射能力之上的开源库。用Python处理数据，然后用Folium将它在Leaflet地图上进行可视化。

概念

Folium能够将通过Python处理后的数据轻松地在交互式的Leaflet地图上进行可视化展示。它不单单可以在地图上展示数据的分布图，还可以使用Vincent/Vega在地图上加以标记。

这个开源库中有许多来自OpenStreetMap、MapQuest Open、MapQuestOpen Aerial、Mapbox和Stamen的内建地图元件，而且支持使用Mapbox或Cloudmade的API密钥来定制个性化的地图元件。Folium支持GeoJSON和TopoJSON两种文件格式的叠加，也可以将数据连接到这两种文件格式的叠加层，最后可使用color-brewer配色方案创建分布图。

安装

安装folium包

开始创建地图

创建底图，传入起始坐标到Folium地图中：

importfolium

map_osm=folium.Map(location=[45.5236, -122.6750]) #输入坐标

map_osm.create_map(path='osm.html')

Folium默认使用OpenStreetMap元件，但是Stamen Terrain, Stamen Toner, Mapbox Bright 和MapboxControl空间元件是内置的：

#输入位置，tiles，缩放比例

stamen=folium.Map(location=[45.5236, -122.6750], tiles='Stamen Toner',zoom_start=13)

stamen.create_map(path='stamen_toner.html')#保存图片

Folium也支持Cloudmade 和 Mapbox的个性化定制地图元件，只需简单地传入API_key ：

custom=folium.Map(location=[45.5236, -122.6750], tiles='Mapbox',

API_key='wrobstory.map-12345678')

最后，Folium支持传入任何与Leaflet.js兼容的个性化地图元件：

tileset=r'http://{s}.tiles.yourtiles.com/{z}/{x}/{y}.png'

map=folium.Map(location=[45.372, -121.6972], zoom_start=12,

tiles=tileset, attr='My DataAttribution')

地图标记

Folium支持多种标记类型的绘制，下面从一个简单的Leaflet类型的位置标记弹出文本开始：

map_1=folium.Map(location=[45.372, -121.6972], zoom_start=12,

tiles='Stamen Terrain')

map_1.simple_marker([45.3288,-121.6625], popup='Mt. Hood Meadows')#文字标记

map_1.simple_marker([45.3311,-121.7113], popup='Timberline Lodge')

map_1.create_map(path='mthood.html')

Folium支持多种颜色和标记图标类型：

map_1=folium.Map(location=[45.372, -121.6972], zoom_start=12,tiles='Stamen Terrain')

map_1.simple_marker([45.3288,-121.6625], popup='Mt. Hood Meadows',marker_icon='cloud') #标记图标类型为云

map_1.simple_marker([45.3311,-121.7113], popup='Timberline Lodge',marker_color='green') #标记颜色为绿色

map_1.simple_marker([45.3300,-121.6823], popup='Some OtherLocation',marker_color='red',marker_icon='info-sign')

#标记颜色为红色，标记图标为“info-sign”)

map_1.create_map(path='iconTest.html')

Folium也支持使用个性化的尺寸和颜色进行圆形标记：

map_2=folium.Map(location=[45.5236, -122.6750], tiles='Stamen Toner',

zoom_start=13)

map_2.simple_marker(location=[45.5244,-122.6699], popup='The Waterfront')

简单树叶类型标记

map_2.circle_marker(location=[45.5215,-122.6261], radius=500,

popup='Laurelhurst Park',line_color='#3186cc',

fill_color='#3186cc')#圆形标记

map_2.create_map(path='portland.html')

Folium有一个简便的功能可以使经/纬度悬浮于地图上：

map_3=folium.Map(location=[46.1991, -122.1889], tiles='Stamen Terrain',zoom_start=13)

map_3.lat_lng_popover()

map_3.create_map(path='sthelens.html')

Click-for-marker功能允许标记动态放置：

map_4=folium.Map(location=[46.8527, -121.7649], tiles='Stamen Terrain',zoom_start=13)

map_4.simple_marker(location=[46.8354,-121.7325], popup='Camp Muir')

map_4.click_for_marker(popup='Waypoint')

map_4.create_map(path='mtrainier.html')

Folium也支持来自Leaflet-DVF的Polygon（多边形）标记集：

map_5=folium.Map(location=[45.5236, -122.6750], zoom_start=13)

map_5.polygon_marker(location=[45.5012,-122.6655], popup='Ross Island Bridge',fill_color='#132b5e', num_sides=3,radius=10)#三边形标记

map_5.polygon_marker(location=[45.5132,-122.6708], popup='Hawthorne Bridge',fill_color='#45647d', num_sides=4,radius=10)#四边形标记

map_5.polygon_marker(location=[45.5275,-122.6692], popup='Steel Bridge',fill_color='#769d96', num_sides=6, radius=10)#四边形标记

map_5.polygon_marker(location=[45.5318,-122.6745], popup='Broadway Bridge',fill_color='#769d96', num_sides=8,radius=10) #八边形标记

map_5.create_map(path='bridges.html')

Vincent/Vega标记

Folium能够使用vincent 进行任何类型标记，并悬浮在地图上。

buoy_map=folium.Map(location=[46.3014, -123.7390], zoom_start=7,

tiles='StamenTerrain')

buoy_map.polygon_marker(location=[47.3489,-124.708], fill_color='#43d9de',radius=12, popup=(vis1, 'vis1.json'))

buoy_map.polygon_marker(location=[44.639,-124.5339], fill_color='#43d9de',radius=12, popup=(vis2, 'vis2.json'))

buoy_map.polygon_marker(location=[46.216,-124.1280], fill_color='#43d9de',radius=12, popup=(vis3, 'vis3.json'))

GeoJSON/TopoJSON层叠加

GeoJSON 和TopoJSON层都可以导入到地图，不同的层可以在同一张地图上可视化出来：

geo_path=r'data/antarctic_ice_edge.json'

topo_path=r'data/antarctic_ice_shelf_topo.json'

ice_map=folium.Map(location=[-59.1759, -11.6016],tiles='Mapbox Bright', zoom_start=2)

ice_map.geo_json(geo_path=geo_path)#导入geoJson层

ice_map.geo_json(geo_path=topo_path,topojson='objects.antarctic_ice_shelf')#导入Toposon层

ice_map.create_map(path='ice_map.html')

分布图

Folium允许PandasDataFrames/Series类型和Geo/TopoJSON类型之间数据转换。Color Brewer 颜色方案也是内建在这个库，可以直接导入快速可视化不同的组合：

importfolium

importpandas as pd

state_geo=r'data/us-states.json'#地理位置文件

state_unemployment=r'data/US_Unemployment_Oct2012.csv'#美国失业率文件

state_data=pd.read_csv(state_unemployment)

#LetFolium determine the scale

map=folium.Map(location=[48, -102], zoom_start=3)

map.geo_json(geo_path=state_geo,data=state_data,

columns=['State', 'Unemployment'],

key_on='feature.id',

fill_color='YlGn',fill_opacity=0.7, line_opacity=0.2,

legend_name='Unemployment Rate(%)')

map.create_map(path='us_states.html')

基于D3阈值尺度，Folium在右上方创建图例，通过分位数创建最佳猜测值，导入设定的阈值很简单：

map.geo_json(geo_path=state_geo,data=state_data,

columns=['State', 'Unemployment'],

threshold_scale=[5, 6, 7, 8, 9,10],

key_on='feature.id',

fill_color='BuPu',fill_opacity=0.7, line_opacity=0.5,

legend_name='Unemployment Rate(%)',

reset=True)

map.create_map(path='us_states.html')

通过Pandas DataFrame进行数据处理，可以快速可视化不同的数据集。下面的例子中，df DataFrame包含6列不同的经济数据，我们将在下面可视化一部分数据：

2011年就业率分布图

map_1=folium.Map(location=[48, -102], zoom_start=3)

map_1.geo_json(geo_path=county_geo,data_out='data1.json', data=df,

columns=['GEO_ID','Employed_2011'],key_on='feature.id',

fill_color='YlOrRd',fill_opacity=0.7, line_opacity=0.3,

topojson='objects.us_counties_20m')#2011就业率分布图

map_1.create_map(path='map_1.html')

2011年失业率分布图

map_2=folium.Map(location=[40, -99], zoom_start=4)

map_2.geo_json(geo_path=county_geo,data_out='data2.json', data=df,

columns=['GEO_ID','Unemployment_rate_2011'],

key_on='feature.id',

threshold_scale=[0, 5, 7, 9, 11,13],

fill_color='YlGnBu', line_opacity=0.3,

legend_name='Unemployment Rate2011 (%)',

topojson='objects.us_counties_20m')#2011失业率分布图

map_2.create_map(path='map_2.html')

2011年中等家庭收入分布图

map_3=folium.Map(location=[40, -99], zoom_start=4)

map_3.geo_json(geo_path=county_geo,data_out='data3.json', data=df,

columns=['GEO_ID','Median_Household_Income_2011'],

key_on='feature.id',

fill_color='PuRd',line_opacity=0.3,

legend_name='Median Household Income2011 ($)',

topojson='objects.us_counties_20m')#2011中等家庭收入分布图

map_3.create_map(path='map_3.html')

编译者简介

回复“志愿者”，了解我们及如何加入我们

大数据文摘精彩文章：

回复【金融】看【金融与商业】专栏历史期刊文章

回复【可视化】感受技术与艺术的完美结合

回复【安全】关于泄密、黑客、攻防的新鲜案例

回复【算法】既涨知识又有趣的人和事

回复【谷歌】看其在大数据领域的举措

回复【院士】看众多院士如何讲大数据

回复【隐私】看看在大数据时代还有多少隐私

回复【医疗】查看医疗领域文章6篇

回复【征信】大数据征信专题四篇

回复【大国】 “大数据国家档案”之美国等12国

回复【体育】大数据在网球、NBA等应用案例

回复【志愿者】了解如何加入大数据文摘

专注大数据，每日有分享

在线咨询

上一篇：别不信，99%的人不知道这5个Word技巧
下一篇：Fireworks详细解析网站设计稿之切割技术

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Shopify模板Google 地图 API 密钥注

、首先注册百度地图开放平台账号

2、在html页面中引入百度地图js文件

3、demo实例

3-1、根据输入地名定位（并返回经纬度）

您的项目需求