[GoogleMaps] 기호를 삽입하여 각각 외부 링크를 가집니다.
10803 단어 JavaScriptgooglemapstech
하고 싶은 일은 두 가지다.
(1) Google Map의 지정된 위치에 태그를 설정합니다.
(2) 세로로 된 표지에 임의의 링크를 각각 붙인다.
또한 Google Map을 사용할 때 API의 연결, 읽기, 중심 좌표 및 초점을 별도로 지정해야 하지만 이 기사에서는 적용되지 않습니다.
실제 코드
//マーカーを立てたい座標を配列でまとめておく
const MarkersLatLng = [
35.xxxxxx, 139.xxxxxx,
35.xxxxxx, 139.xxxxxx,
35.xxxxxx, 139.xxxxxx
];
//外部リンクを配列でまとめておく
const ExternalLink = [
'https://xxx.jp',
'https://yyy.jp',
'https://zzz.jp'
];
//マーカーの設定全体の関数
function SetMarker() {
const idx = parseInt(MarkersLatLng.length);
const img = 'path/marker.png';//マーカーに使用したい画像のpath
let icon;
//マーカーのサイズなどのデザイン周りの設定
icon = new google.maps.MarkerImage(
img, //画像のURL
new google.maps.Size(43, 44), //画像のサイズ
new google.maps.Point(0, 0), //画像のposition
new google.maps.Point(16, 42), //画像のアンカーの位置
new google.maps.Size(43, 44) //画像のサイズ
);
let i = 0;
while (i < idx) {
console.log(i);
//座標を設定
var pos = new google.maps.LatLng(
MarkersLatLng[i][0],
MarkersLatLng[i][1]
);
// マーカーのインスタンスを作成する
MarkerArray[i] = new google.maps.Marker({
map: map,
position: pos,
icon: icon_path,
zIndex: 15,
cursor: 'pointer',
animation: google.maps.Animation.DROP,
lavel: i
});
MarkerEvent(i);
i += 1;
}
//アイコンをクリックしたら指定のURLへと遷移させる関数
function MarkerEvent(i) {
MarkerArray[i].addListener('click', function() {
window.open().location.href =
ExternalLink[MarkerArray[i].lavel];
});
}
}
//関数の実行
$(document).ready(function(){
SetMarker();
});
참고 자료
Maps JavaScript API
Reference
이 문제에 관하여([GoogleMaps] 기호를 삽입하여 각각 외부 링크를 가집니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/ryujno/articles/840ad63b2f89f925fc34텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)