整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
可以在模版中添加地圖分區，以顯示您的營業地點。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
http://api.map.baidu.com/api?v=2.0&ak=您的密鑰
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密鑰"></script>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>百度地圖API</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
<!-- 如果需要拖拽鼠標進行操作，可引入以下js文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/RectangleZoom/1.2/src/RectangleZoom_min.js"></script>
<style type="text/css">
body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>
</head>
<body>
<div id="allmap" style="width: 800px;height: 500px;"></div>
<div id="r-result">請輸入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖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等應用案例
回復【志愿者】了解如何加入大數據文摘
專注大數據，每日有分享
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
