以程式產生圖示(分店資訊)
可同時於地圖上設置多個標記點。
您也能使用以 Base64 編碼的圖片，例如：
img.src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWcluWxpF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjkwcHgiIGhlaWdodD0iMTA2cHgiIHZpZXdCb3g9IjAgMCA5MCAxMDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDkwIDEwNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjMDA1M0NDIiBkPSJNNDQuOTkzLDBDMTcuMTczLDAsMCwyMS4zNzcsMCw0Mi40OTFjMCwwLDAsMC4xNjgsMCwwLjQ0OWMwLjA4MSw3LjI1OCwyLjU0NCwxNS4xMjEsNi43NDUsMjAuODczDQoJYzEuNDA0LDIuMDM1LDMuMTQxLDMuOTkzLDUuMjAxLDUuODQ5aDAuMDRjMC40MjksMC4zOTQsMC44NDYsMC43NTksMS4yODEsMS4xMDRjMC4yMiwwLjE5NSwwLjQ0MywwLjM3OSwwLjY2OSwwLjU3Mw0KCWM3LjY5Miw1LjcwMiwyMy40NjIsMTQuNzc4LDI2LjAwOSwyMC40OUM0Mi40OSw5Ny41NDEsNDUuMSwxMDYsNDUuMSwxMDZzMi40NDEtOC4xODcsNC45NTQtMTQuMTcxczE4LjMxNC0xNC43ODgsMjYuMDA1LTIwLjQ5DQoJYzAuMjI3LTAuMTkzLDAuNDUzLTAuMzc4LDAuNjY1LTAuNTczYzAuNDM4LTAuMzQ2LDAuODU0LTAuNzExLDEuMjc3LTEuMTA0aDAuMDRjMi4wNy0xLjg1NSwzLjgwOC0zLjgyOCw1LjIxMi01Ljg0OQ0KCWM0LjIwNC01Ljc1Miw2LjY2LTEzLjYxNCw2Ljc0Ny0yMC44NzNjMC0wLjI4LDAtMC40NDksMC0wLjQ0OUM4OS45OTQsMjEuMzc3LDcyLjgyNywwLDQ0Ljk5MywweiIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTMxLjkyNywyOS4wNzRjMC0xLjcwNiwwLjU3LTMuMTUxLDEuNzEtNC4zNDFjMS4xMzgtMS4yMTEsMi41MTYtMS43OTgsNC4xMjgtMS43OTgNCgljMS42MTcsMCwzLDAuNTg2LDQuMTQ3LDEuNzk4YzEuMTM5LDEuMTksMS43MDQsMi42MzUsMS43MDQsNC4zNDF2MjEuMzAyaC0zLjkwNXYtNi43NTZoLTMuODc0djYuNzcxaC0zLjkxVjI5LjA3NHogTTM5LjcwNCwzOS43MzQNCgl2LTIuNjczVjI5LjA2YzAtMC42MDYtMC4xODEtMS4xMzctMC41Ny0xLjU4M2MtMC4zNjYtMC40MzktMC44MTUtMC42NDctMS4zNjUtMC42NDdjLTAuNTQzLDAtMC45ODMsMC4yMTUtMS4zNzEsMC42NTQNCgljLTAuMzgyLDAuNDM5LTAuNTY5LDAuOTYyLTAuNTY5LDEuNTcydjcuOTk5djIuNjY3TDM5LjcwNCwzOS43MzRMMzkuNzA0LDM5LjczNHoiLz4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik01My4xMjUsMjMuNDc5YzEuNTU1LDAuMDYxLDIuODg3LDAuNjc5LDMuOTk0LDEuODY0YzEuMDg1LDEuMTk3LDEuNjQ0LDIuNTkzLDEuNjQ0LDQuMjY5djcuOTA5DQoJYzAsMS42ODUtMC41NjgsMy4xMjUtMS43MDEsNC4zMTZjLTEuMTI1LDEuMTkxLTIuNTIxLDEuNzg1LTQuMTIyLDEuNzg1aC0xLjk2NHY2Ljc3MWgtMy45MTNWMzcuNTE5di03Ljg5NnYtNi4xNDZoNS44MzQNCglMNTMuMTI1LDIzLjQ3OUw1My4xMjUsMjMuNDc5eiBNNTAuOTc2LDI3LjM5NHYxMi4zNDFoMS45MzNjMC41MzEsMCwxLjAxMS0wLjIwOCwxLjM4LTAuNjQ3YzAuMzkyLTAuNDUyLDAuNTY1LTAuOTcsMC41NjUtMS41ODENCgl2LTcuODk2YzAtMC42MTMtMC4xNzUtMS4xMzEtMC41NjUtMS41NzZjLTAuMzgtMC40MzgtMC44NDktMC42NDgtMS4zOC0wLjY0OEw1MC45NzYsMjcuMzk0TDUwLjk3NiwyNy4zOTR6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjguNzEsMjQuNjYzYzAsMC0wLjAxMy0xLjczNS0xLjkzMi0xLjczNWMtMS45NDksMC0xLjk2MywxLjczNS0xLjk2MywxLjczNWwwLDANCgljLTAuMTE1LDMuMDgyLTAuNzE3LDkuMTctMy44NzUsOS4xN2MtMy4xMywwLTMuNzYxLTYuMDgzLTMuODg0LTkuMTdsMCwwYzAsMCwwLTAuMDA2LDAtMC4wMTJsMCwwDQoJYy0wLjAwNi0wLjE5Ny0wLjE0Mi0xLjcxNi0xLjk1Mi0xLjcxNmMtMS45MzYsMC0xLjk0MSwxLjczNC0xLjk0MSwxLjczNHYyNS43MTVoMy44ODF2LTE0LjM5YzAsMCwwLjc0NiwyLjQ1OSwzLjg5MSwyLjQ1OQ0KCWMzLjE1MywwLDMuODktMi40NTksMy44OS0yLjQ1OXYxNC4zOWgzLjkwMVYyNC42NDNMMjguNzEsMjQuNjYzeiIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTc2LjgyMywzMC41MThjMC0yLjUxOS0wLjU0NC00LjE2Mi0xLjY0NS01LjMwNWMtMS4wODUtMS4xNDMtMi40MjUtMS43MTYtMy45NjktMS43MTYNCgljLTEuNTU0LDAtMi44NzksMC41NzktMy45NzksMS43MTZjLTEuMTAxLDEuMTU1LTEuNjMyLDIuODAyLTEuNjMyLDUuMzA1YzAsMi41MTEsMC40OTEsNC4wMzksMS40NzcsNS4xNTkNCgljLTAuOTg1LDEuMTMxLTEuNDc3LDIuNDc3LTEuNDc3LDQuMDA5djQuODA1YzAsMS42MzEsMC41MywzLjAwOCwxLjYzMiw0LjE2OGMxLjA4NCwxLjE1MSwyLjQyNSwxLjcyNSwzLjk3OSwxLjcyNQ0KCWMxLjU0NCwwLDIuODg0LTAuNTgyLDMuOTY5LTEuNzI1YzEuMDg2LTEuMTU0LDEuNjQ1LTIuNTQ0LDEuNjQ1LTQuMTY4di00LjgwNWMwLTEuNTMyLTAuNDkyLTIuODctMS40OTItNC4wMDkNCglDNzYuMzE3LDM0LjU1Nyw3Ni44MjMsMzMuMDQyLDc2LjgyMywzMC41MTh6IE03My4wOTQsNDQuNDkxYzAsMC41OC0wLjE4NCwxLjA5My0wLjU0MywxLjUwNmMtMC4zNzEsMC40MjgtMC44MSwwLjYyMy0xLjMyNywwLjYyMw0KCWMtMC41MzEsMC0wLjk2Mi0wLjIwMy0xLjM1Mi0wLjYyM2MtMC4zNDEtMC40MDctMC41MTktMC45MjYtMC41MTktMS41MDZ2LTQuODA1YzAtMC41OTIsMC4xNzktMS4wOTEsMC41MTktMS41MDYNCgljMC4zOTEtMC40MzMsMC44MDgtMC42MjcsMS4zNTItMC42MjdjMC41MTgsMCwwLjk2OCwwLjIsMS4zMjcsMC42MjdjMC4zNTksMC40MTUsMC41NDMsMC45MTMsMC41NDMsMS41MDZWNDQuNDkxeiBNNzMuMDk0LDMyLjE3MQ0KCWMwLDAuNTg1LTAuMTg0LDEuMDg2LTAuNTQzLDEuNTA3Yy0wLjM3MSwwLjQyNi0wLjgxLDAuNjI1LTEuMzI3LDAuNjI1Yy0wLjUzMSwwLTAuOTYyLTAuMjA1LTEuMzUyLTAuNjI1DQoJYy0wLjM0MS0wLjQxOS0wLjUxOS0wLjkyNS0wLjUxOS0xLjUwN3YtMy42ODVjMC0wLjU4MiwwLjE3OS0xLjA4MSwwLjUxOS0xLjUwMmMwLjM5MS0wLjQyNiwwLjgwOC0wLjYyOCwxLjM1Mi0wLjYyOA0KCWMwLjUxOCwwLDAuOTY4LDAuMTk1LDEuMzI3LDAuNjI4YzAuMzU5LDAuNDIxLDAuNTQzLDAuOTE5LDAuNTQzLDEuNTAyVjMyLjE3MXoiLz4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNi45MTQsNjYuMjA2di05LjkyYzAuODE3LTAuMDk2LDEuOTY4LTAuMTM2LDMuNDUtMC4xMzZjMS4yMzcsMCwyLjA5LDAuMjI3LDIuNTUxLDAuNjY2DQoJYzAuNDY1LDAuNDQyLDAuNjksMS4yNzEsMC42OSwyLjQ3MWMwLDEuMjI3LTAuMjIsMi4wNTQtMC42NzIsMi41MDJjLTAuNDI3LDAuNDM4LTEuMjQyLDAuNjUyLTIuNDAxLDAuNjUyDQoJYy0wLjcyMywwLTEuNDQ4LTAuMDQ2LTIuMTgyLTAuMTMzdjMuODk3SDE2LjkxNHogTTE4LjM0NSw2MS4yMWgxLjk4N2MwLjcwNC0wLjAxNSwxLjE4Ni0wLjE0NiwxLjQzNi0wLjQxMw0KCWMwLjI2NS0wLjI1OCwwLjM5NC0wLjc2NCwwLjM5NC0xLjUxNWMwLTAuNzM2LTAuMTI5LTEuMjQ4LTAuMzk0LTEuNDk5Yy0wLjI1Ny0wLjI1OC0wLjczNi0wLjM5Mi0xLjQzNi0wLjM5Mg0KCWMtMC45NTcsMC0xLjYyNCwwLTEuOTg3LDAuMDE3VjYxLjIxeiIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTI2LjcxMSw1Ni4xNDR2OC4wNDhjLTAuMDA2LDAuMjkxLDAuMDY3LDAuNTE5LDAuMjIyLDAuNjYzYzAuMTQyLDAuMTQ3LDAuMzgsMC4yMjEsMC42ODYsMC4yMjFoMC42NDcNCglsMC4xNjEsMS4wODRjLTAuMjc3LDAuMTI0LTAuNzI2LDAuMTk0LTEuMzQsMC4xOTRjLTAuNTQzLDAtMC45NzYtMC4xNTctMS4yODktMC40NzRjLTAuMzIyLTAuMzM3LTAuNDg0LTAuNzkyLTAuNDg0LTEuMzg1di04LjM1Mg0KCUgyNi43MTF6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjkuNjk0LDYwLjM1NmwtMC4xMy0xLjAxOWMxLjI2NC0wLjIwOSwyLjQwOC0wLjMyOSwzLjQxLTAuMzI5YzAuODYyLDAsMS40ODUsMC4xNjUsMS44OTMsMC41MTkNCgljMC40MDIsMC4zNDEsMC41OTQsMC45NDcsMC41OTQsMS43OTR2NC44ODVIMzQuMzhsLTAuMTYyLTEuMTA1Yy0wLjgwOCwwLjgxNS0xLjc0MiwxLjIzOC0yLjgwOCwxLjIzOA0KCWMtMC42NiwwLTEuMTczLTAuMTYzLTEuNTY3LTAuNTJjLTAuMzk2LTAuMzUyLTAuNTgxLTAuODMxLTAuNTgxLTEuNDcxdi0wLjcyOGMwLTAuNTQyLDAuMTY3LTAuOTgyLDAuNTE4LTEuMjg4DQoJYzAuMzQxLTAuMzEzLDAuODI3LTAuNDYxLDEuNDc2LTAuNDYxaDIuODIydi0wLjU1MWMtMC4wMDgtMC40MzctMC4xMTctMC43MzEtMC4zMDEtMC44OTZjLTAuMTk5LTAuMTUzLTAuNTYzLTAuMjQtMS4xMDYtMC4yNA0KCUMzMi4xNDcsNjAuMTg2LDMxLjE1MSw2MC4yNDIsMjkuNjk0LDYwLjM1NnogTTMwLjY4MSw2My44MTl2MC4zNzJjMCwwLjM0OCwwLjA3NywwLjU4MiwwLjIzOCwwLjc0DQoJYzAuMTY3LDAuMTU2LDAuNDI1LDAuMjM4LDAuNzg1LDAuMjM4YzAuODMyLDAsMS42MjQtMC4zMTksMi4zNzYtMC45Nzl2LTEuMjdIMzEuNTFjLTAuMzA2LDAuMDA4LTAuNTE5LDAuMDgxLTAuNjQ3LDAuMjMzDQoJQzMwLjc0Myw2My4zMDEsMzAuNjgxLDYzLjUyLDMwLjY4MSw2My44MTl6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDEuNDUzLDY1LjA2OWwwLjE1NiwxLjA4Yy0wLjQ0OSwwLjEyOC0wLjk5OCwwLjE4LTEuNjUzLDAuMThjLTAuNiwwLTEuMDQ1LTAuMTU5LTEuMzU4LTAuNTENCgljLTAuMzA5LTAuMzM4LTAuNDY1LTAuODE2LTAuNDY1LTEuNDM4di00LjEwOWgtMS4yODl2LTEuMDExbDEuMjg0LTAuMDU2di0yLjA2OWgxLjM4MnYyLjA1MWgyLjE3NXYxLjA3OWgtMi4xNzR2My45MTINCgljMCwwLjMzMSwwLjA3MywwLjU1OSwwLjIwOCwwLjY4OGMwLjEzNiwwLjEzNiwwLjM3NCwwLjE5NSwwLjcxOCwwLjE5NWgxLjAxNlY2NS4wNjl6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDcuNzIzLDU3LjAzMWgtMS40MjRjLTAuNDI3LDAtMC43MzcsMC4wODItMC45MTYsMC4yNDVjLTAuMTc3LDAuMTY5LTAuMjY1LDAuNDQ2LTAuMjY1LDAuODV2MS4wNjJoMi4xNzUNCgl2MS4wNzloLTIuMTc1djUuOTRoLTEuMzk1di01LjkzNWgtMS4yNjF2LTEuMDExbDEuMjYxLTAuMDc0di0xLjIxN2MwLTAuNjg3LDAuMTY1LTEuMTk4LDAuNDkzLTEuNTQ2DQoJYzAuMzIxLTAuMzU2LDAuODU4LTAuNTMsMS41OTgtMC41M2MwLjkwNSwwLDEuNTgxLDAuMDMsMi4wMywwLjEwMkw0Ny43MjMsNTcuMDMxeiIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQ5LjA0MSw1OS44NTVjMC41MDYtMC41NjgsMS4zNjYtMC44NDgsMi41OTItMC44NDhjMS4yMTMsMCwyLjA3MiwwLjI3OCwyLjU4LDAuODQ4DQoJYzAuNDkxLDAuNTcsMC43NDMsMS41MTEsMC43NDMsMi44NTZjMCwxLjM0MS0wLjI1MiwyLjI5LTAuNzMyLDIuODU2Yy0wLjUxOCwwLjU1Ny0xLjM5MSwwLjgzNS0yLjU5LDAuODM1DQoJYy0xLjIyNiwwLTIuMDg3LTAuMjc4LTIuNTkyLTAuODM1Yy0wLjUxNy0wLjU2Ni0wLjc2OS0xLjUxMi0wLjc2OS0yLjg1NkM0OC4yNzMsNjEuMzY2LDQ4LjUyNSw2MC40MTMsNDkuMDQxLDU5Ljg1NXoNCgkgTTUzLjEyNSw2MC43MTZjLTAuMjc4LTAuMzU5LTAuNzcxLTAuNTMtMS40OTEtMC41M2MtMC43NTMsMC0xLjIzOCwwLjE3MS0xLjQ5MiwwLjUzYy0wLjI3OCwwLjM2LTAuNDEyLDEuMDIyLTAuNDEyLDEuOTk2DQoJczAuMTM0LDEuNjMyLDAuNDEyLDEuOTg0YzAuMjU0LDAuMzU0LDAuNzM5LDAuNTMxLDEuNDkyLDAuNTMxYzAuNzIsMCwxLjIxMy0wLjE3MiwxLjQ5MS0wLjUxOGMwLjI2Ny0wLjM2MSwwLjQwMy0xLjAyNSwwLjQwMy0xLjk5DQoJQzUzLjUyOCw2MS43MzgsNTMuMzkxLDYxLjA3Niw1My4xMjUsNjAuNzE2eiIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYxLjMxNCw1OS4wMDlsLTAuMTQ5LDEuMzA5aC0wLjQ0M2MtMC41NDUsMC0xLjM3OCwwLjI2NS0yLjUxOCwwLjgwOHY1LjA4aC0xLjR2LTcuMDJoMS4wODlsMC4xNDcsMS4wNjENCgljMS4wMjQtMC44MzYsMi4wMTItMS4yNTEsMi45MzQtMS4yNTFMNjEuMzE0LDU5LjAwOUw2MS4zMTQsNTkuMDA5eiIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYzLjc3NCw1OS4xODhsMC4wNjcsMS4wNzljMC45NzktMC44NCwxLjkzNS0xLjI2OSwyLjgxOC0xLjI2OWMwLjk3NCwwLDEuNTY3LDAuNDE1LDEuNzgxLDEuMjI1DQoJYzAuOTM4LTAuODEsMS44NDYtMS4yMjUsMi43NjgtMS4yMjVjMC42MTQsMCwxLjA3NiwwLjE2NSwxLjQwNCwwLjQ5M2MwLjMxNSwwLjMzNCwwLjQ2OCwwLjgxNCwwLjQ2OCwxLjQ1NHY1LjI1OGgtMS4zNjZ2LTQuODUxDQoJYzAtMC40MDctMC4wNzktMC43MTMtMC4yMjctMC45Yy0wLjE1Mi0wLjE3My0wLjQxNi0wLjI2Ny0wLjc4NC0wLjI2N2MtMC4zMTUsMC0wLjYxOCwwLjA3NS0wLjkxLDAuMjE2DQoJYy0wLjI3OCwwLjEzMS0wLjcwNiwwLjQxMS0xLjI2NCwwLjgwOXY0Ljk5M2gtMS4zMjV2LTQuODU0YzAtMC40MjktMC4xMDQtMC43MjctMC4yNTYtMC45MTFjLTAuMTY1LTAuMTY1LTAuNDMtMC4yNjYtMC43NzUtMC4yNjYNCgljLTAuMzExLDAtMC42MTMsMC4wODItMC45MDQsMC4yMTZjLTAuMjg5LDAuMTUxLTAuNywwLjQxNy0xLjI3LDAuODA4djQuOTk5aC0xLjM4M3YtNy4wMDdINjMuNzc0TDYzLjc3NCw1OS4xODh6Ii8+DQo8L3N2Zz4NCg==';範例展示
原始碼
copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>以程式產生圖示(分店資訊) - Map8 Platform Documentation</title>
<link rel="stylesheet" href="https://api.map8.zone/css/gomp.css?key=[YOUR_KEY_HERE]" />
<style>
#map{
height: 400px;
width: 100%;
}
.available{
color:#6b0;
}
.unvailable{
color:#c00;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
<script type="text/javascript">
gomp.accessToken = '[YOUR_KEY_HERE]';
var map = new gomp.Map({
container: 'map', // 地圖容器 ID
style: 'https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json', // 地圖樣式檔案位置
maxBounds: [[105, 15], [138.45858, 33.4]], // 台灣地圖區域
center: [121.50782950659027, 25.02854267009201], // 初始中心座標，格式為 [lng, lat]
zoom: 15.5, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
attributionControl: false
}).addControl(new gomp.AttributionControl({
compact: false
}));
var points = {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"description": "站點名稱：<strong>南海店</strong><br />站點編號：NH1001<br />開放時間：08:00 ~ 21:00<br />營業狀態：<span class=\"available\">營業中</span>",
},
"geometry": {
"type": "Point",
"coordinates": [121.50872, 25.029194]
}
},{
"type": "Feature",
"properties": {
"description": "站點名稱：<strong>汀州店</strong><br />站點編號：DC1001<br />開放時間：08:30 ~ 22:00<br />營業狀態：<span class=\"available\">營業中</span>",
},
"geometry": {
"type": "Point",
"coordinates": [121.509718, 25.027623]
}
},{
"type": "Feature",
"properties": {
"description": "站點名稱：<strong>明鑫店</strong><br />站點編號：MH1001<br />開放時間：08:00 ~ 22:00<br />營業狀態：<span class=\"available\">營業中</span>",
},
"geometry": {
"type": "Point",
"coordinates": [121.507754, 25.027246]
}
},{
"type": "Feature",
"properties": {
"description": "站點名稱：<strong>中華店</strong><br />站點編號：ZH1001<br />開放時間：14:00 ~ 23:00<br />營業狀態：<span class=\"unvailable\">未營業</span>",
},
"geometry": {
"type": "Point",
"coordinates": [121.506262, 25.027673]
}
},{
"type": "Feature",
"properties": {
"description": "站點名稱：<strong>忠義店</strong><br />站點編號：ZY1001<br />開放時間：09:00 ~ 18:00<br />營業狀態：<span class=\"available\">營業中</span>",
},
"geometry": {
"type": "Point",
"coordinates": [121.505516, 25.029691]
}
}]
}
};
var pointsSource = {
"id": "pois",
"type": "symbol",
"source": points,
"layout": {
"text-font": ["Noto Sans Regular"], // 文字字體(必要資料, 不可省略)
"text-field": "{storeName}", //資訊文字
"text-offset": [0, 2], //文字位移位置第一個為x軸, 第二個為y軸
"text-padding": 2,
"text-size": 12,
"icon-image": "marker",
"icon-size": 0.5,
"icon-offset": [0, -21],
}
};
var popup = new gomp.Popup({
anchor: 'bottom',
closeButton: true,
closeOnClick: false,
offset: [0, -42]
});
var markerEl = document.createElement('img');
markerEl.src = '[YOUR_IMAGE_HERE]'; // 請代換為您的圖檔之 URL (例如 "https://example.com/image.png")
map.on('click', 'pois', function(e) {
// 設定滑鼠游標樣式
map.getCanvas().style.cursor = 'pointer';
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
// 確保訊息視窗不會被遮擋
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
// 設定訊息視窗內容並在地圖上顯示
popup.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
//將地圖中心點移動至店位置
map.easeTo({
center: coordinates,
zoom: 16,
duration: 500,
easing: (e) => e,
});
});
map.on('load', function(){
map.addImage('marker', markerEl);
map.addLayer(pointsSource);
});
</script>
</body>
</html>