javascript 地図ページの住所露出変更·现在地表示追加（5/8リリース？）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 地図ページの住所露出変更·现在地表示追加（5/8リリース？）相关的知识，希望对你有一定的参考价值。
// map, marker変数にアクセスするためグローバルに
window.abIssue334 = {
map: map,
marker: marker
}(function($, util) {
window.issue343 = {
start: function(pattern) {
var that = this;
switch (pattern) {
case 1:
this.openInfo();
break;
case 2:
this.openInfo();
$('#map_detail').remove();
this.addInfo();
break;
case 3:
// 本番でもバグ？下にできる変な余白を削除
this.setBodyHeightChange();
this.addWindow();
break;
case 4:
this.setBodyHeightChange();
this.getGeolocation('api');
break;
case 5:
this.setBodyHeightChange();
this.getGeolocation('img');
break;
case 6:
this.setBodyHeightChange();
this.watchGeolocation();
break;
default:
alert('該当するパターンがありません');
break;
}
},
openInfo: function() {
var $mapName = $('#map_name').clone();
// ノードを再生成して既存の.toggleが走らないように
$('#map_name').remove();
$('#map_info').prepend($mapName);
// 見た目調整
$('#map_contents').height('auto');
$('.map_ttl').css('margin', '4px 0');
$('.icon_datauri').remove();
},
addInfo: function() {
var that = this;
var $info = '<div class="shopFooter"><div class="shopFooter__header"><h2 class="shopFooter__title">銀座 さかなさま</h2><p class="shopFooter__kana">ギンザ サカナサマ</p></div><div class="shopFooter__body"><div class="footerShopCV"><div class="footerShopCV__layout"><div class="hf-col hf-mb12"><div class="hf-col__6"><div class="hf-button"><div class="hf-button__body"><a href="tel:050-3477-7619" class="hf-button__item hf-button__item--big" onclick="sc_count_shop(\'phone_to_2\')"><div class="hf-ic-tel"><div><p class="hf-text--big hf-clr-white"><span>電話する</span></p><p class="hf-text--small hf-clr-white"><span>050-3477-7619</span></p></div></div></a></div></div></div><div class="hf-col__6 hf-pl8"><div class="hf-button"><div class="hf-button__body"><a href="https://r.gnavi.co.jp/plan/p735402/plan-reserve/plan/plan_list/" class="hf-button__item hf-button__item--big" onclick="sc_count(\'plan_reserve_06\')"><div class="hf-ic-net-yoyaku"><div><p class="hf-text--big hf-clr-white"><span>ネット<br>予約する</span></p></div></div></a></div></div></div></div><div class="hf-col"><div class="hf-col__6"><div class="hf-button"><div class="hf-button__body"><a href="http://line.naver.jp/R/msg/text/?%E3%81%90%E3%82%8B%E3%81%AA%E3%81%B3-%E9%8A%80%E5%BA%A7%20%E3%81%95%E3%81%8B%E3%81%AA%E3%81%95%E3%81%BE%0A050-3477-7619%0A%E6%9D%B1%E4%BA%AC%E9%83%BD%E4%B8%AD%E5%A4%AE%E5%8C%BA%E9%8A%80%E5%BA%A71-5-10%20%E9%8A%80%E5%BA%A7%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%96%E3%83%93%E3%83%AB5F%0Ahttps%3A%2F%2Fr.gnavi.co.jp%2Fp735402%2F%3Fsc_lid%3Dscl_sbtn_ln" class="hf-button__item hf-button__item--default" onclick="sc_count(\'sns_line_01\')"><div class="hf-ic-line"><div><p class="hf-text--big hf-bold"><span>LINEで送る</span></p></div></div></a></div></div></div><div class="hf-col__3 hf-pl8"><div class="hf-button"><div class="hf-button__body"><a href="http://my.gnavi.co.jp/restaurant/regist.php?shopid=p735402&wMode=2" class="hf-button__item hf-button__item--default js−chottogButton" data-chg-content="1402" onclick="sc_count(\'tnp_sp_bookmark\')"><div class="hf-ic-chottog-top"><div><p class="hf-text--small hf-bold"><span class="js-chottogText">行きたい</span></p></div></div></a></div></div></div><div class="hf-col__3 hf-pl8"><div class="hf-button"><div class="hf-button__body"><a href="https://r.gnavi.co.jp/p735402/map/" class="hf-button__item hf-button__item--default"><div class="hf-ic-map"><div><p class="hf-text--small hf-bold"><span>地図</span></p></div></div></a></div></div></div></div></div></div></div></div>';
var $pageTop = '<div class="pageTop js-page-top"><a href="#page" class="js-anchor"><p>ページの先頭へ</p></a></div>';
$('#map_name').after($pageTop).after($info);
// ページトップのclickイベントを再アタッチ
$('.js-anchor').click(function() {
var href= $(this).attr('href');
that.anchorLink(href);
return false;
});
// チョットぐも
that.chottog();
},
anchorLink: function(href) {
var speed = 500;
var target = $(href === '#' || href === '' ? 'html' : href);
var position = target.offset().top;
$('html, body').animate({scrollTop:position}, speed, 'swing');
},
chottog: function() {
// チョットぐのイベントをアタッチ
},
setBodyHeight: function() {
$('body').height($('#page').height());
},
setBodyHeightChange: function() {
var that = this;
// 初回
that.setBodyHeight();
// 既存jsとの調整
$(window).on('orientationchange', function() {
setTimeout(function() {
that.setBodyHeight();
}, 500);
});
},
addWindow: function() {
var info = $('.map_else').find('th:contains("住所")').next().text();
var infowindow = new google.maps.InfoWindow({
content: info,
maxWidth: 203
});
infowindow.open(window.abIssue334.map, window.abIssue334.marker);
window.abIssue334.marker.addListener('click', function() {
infowindow.open(window.abIssue334.map, window.abIssue334.marker);
});
},
getGeolocation: function(method) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
// API
if (method === 'api') {
markerLocationOuter = new google.maps.Circle({
strokeColor: '#A5D8F5',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#A5D8F5',
fillOpacity: 0.5,
map: window.abIssue334.map,
center: pos,
radius: 50
});
markerLocationInner = new google.maps.Circle({
strokeColor: '#fff',
strokeOpacity: 1,
strokeWeight: 2,
fillColor: '#0073bb',
fillOpacity: 1,
map: window.abIssue334.map,
center: pos,
radius: 20
});
}
// 画像
if (method === 'img') {
markerLocation = new google.maps.Marker({
position: pos,
map: window.abIssue334.map,
icon: {
url: 'img/_abtest/issue343/marker.png', // svgでも可
scaledSize: new google.maps.Size(50, 50) // Ratina対応
}
});
}
},
function(error) {
var errorNo = error.code;
// 返ってくるエラーコードの番号
// 0: 原因不明のエラー
// 1: ユーザーが位置情報の取得を許可しなかった
// 2: 電波状況などで位置情報が取得できなかった
// 3: 時間がかかり過ぎた
var errorInfo = [
'原因不明のエラーが発生しました',
'位置情報の取得が許可されませんでした',
'電波状況などで位置情報が取得できませんでした',
'タイムアウトしました'
] ;
var errorMessage = errorInfo[errorNo];
console.log(errorMessage);
});
} else {
console.log('お使いの端末はGeoLacation APIに対応していません');
}
},
watchGeolocation: function() {
var id, target, options;
function success(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
console.log('= ', pos);
// 画像
markerLocation = new google.maps.Marker({
position: pos,
map: window.abIssue334.map,
icon: {
url: 'img/_abtest/issue343/marker.png', // svgでも可
scaledSize: new google.maps.Size(50, 50) // Ratina対応
}
});
var crd = position.coords;
if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
console.log('Congratulations, you reached the target');
navigator.geolocation.clearWatch(id);
}
};
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
target = {
latitude : 35.689487,
longitude: 139.691706
}
options = {
enableHighAccuracy: false,
timeout: 5000,
maximumAge: 0
};
id = navigator.geolocation.watchPosition(success, error, options);
}
}
util.abtestRun(343);
})(jQuery, util);以上是关于javascript 地図ページの住所露出変更·现在地表示追加（5/8リリース？）的主要内容，如果未能解决你的问题，请参考以下文章
javascript 第11期：20180620 - no73。トップページのFV改善フェーズ1（ポイントモーダル，店铺名下の整理）