自訂地圖標記點圖示

自訂地圖標記點圖示。可使用 HTML 元素。一個元素只能指定給一個 Marker，若有多個 Marker 則需指定多個不同的元素。

您也能使用以 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%;
        }
    </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.54885, 25.03625], // 初始中心座標，格式為 [lng, lat]
            zoom: 16, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
            minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
            maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
            pitch: 50, // 攝影機仰角, 可省略, [0-60]
            bearing: 0, // 地圖角度, 可省略, [-180 ~ 180; 0 為正北朝上, 180 為正南朝上]
            attributionControl: false
        }).addControl(new gomp.AttributionControl({
            compact: false
        }));

        map.on('load', function () {
            var nowMapCenterPoint = map.getCenter();

            var img = document.createElement('img');
            img.src = '[YOUR_IMAGE_HERE]'; // 請代換為您的圖檔之 URL (例如 "https://example.com/image.png")
            var markerImg = new gomp.Marker(img, {offset: [0, -21]})
                .setLngLat(nowMapCenterPoint)
                .addTo(map);

            var div = document.createElement('div');
            div.style.height = '42px';
            div.style.width = '28px';
            div.style.backgroundImage = 'url("[YOUR_IMAGE_HERE]")'; // 請代換為您的圖檔之 URL (例如 "https://example.com/image.png")
            var markerDiv = new gomp.Marker(div, {offset: [0, -21]})
                .setLngLat({lng: nowMapCenterPoint.lng, lat: nowMapCenterPoint.lat - 0.001})
                .addTo(map);
        });
    </script>
</body>
</html>