ฉันใช้ Google Maps API เพื่อสร้างแผนที่ที่เต็มไปด้วยเครื่องหมาย แต่ฉันต้องการให้เครื่องหมายหนึ่งอันโดดเด่นจากสิ่งอื่น ๆ ฉันคิดว่าสิ่งที่ง่ายที่สุดที่จะทำคือเปลี่ยนสีของเครื่องหมายเป็นสีน้ำเงินแทนที่จะเป็นสีแดง นี่เป็นเรื่องง่ายที่จะทำหรือฉันต้องสร้างไอคอนใหม่ทั้งหมดหรือไม่? หากฉันต้องสร้างไอคอนใหม่วิธีที่ง่ายที่สุดในการทำเช่นนั้นคืออะไร

เนื่องจากแผนที่ v2 เลิกใช้แล้วคุณอาจสนใจแผนที่ v3: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

สำหรับแผนที่ v2:

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

คุณจะมีตรรกะหนึ่งชุดทำพิน 'ปกติ' ทั้งหมดและอีกชุดที่ทำพิน 'พิเศษ' โดยใช้เครื่องหมายใหม่ที่กำหนดไว้

ด้วย Google แผนที่ API เวอร์ชัน 3 วิธีที่ง่ายที่สุดในการดำเนินการนี้อาจเกิดจากการคว้าชุดไอคอนที่กำหนดเองเช่นเดียวกับที่ Benjamin Keen สร้างขึ้นที่นี่:

http://www.benjaminkeen.com/?p=105

หากคุณวางไอคอนเหล่านั้นทั้งหมดไว้ในที่เดียวกับหน้าแผนที่ของคุณคุณสามารถกำหนดสีให้กับ Marker ได้ง่ายๆโดยใช้ตัวเลือกไอคอนที่เหมาะสมเมื่อสร้าง:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

นี่ง่ายสุด ๆ และเป็นแนวทางที่ฉันใช้กับโครงการที่ฉันกำลังทำอยู่

MapIconMaker: ห้องสมุดสำหรับ Google Maps v2

วิธีหนึ่งคือการใช้MapIconMaker (deadlink) มีตัวอย่างที่นี่ (deadlink) ไอคอนเริ่มต้นของ Google แผนที่มีความกว้าง 20px และสูง 34px ดังนั้นคุณสามารถใช้สิ่งนี้เลียนแบบ:

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

คุณสามารถห่อมันในฟังก์ชั่นบางอย่างเพื่อทำให้สิ่งต่าง ๆ ง่ายขึ้นในตัวคุณ:

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

นั่นคือสิ่งที่ฉันใช้เป็นการส่วนตัวสำหรับเครื่องหมายทั้งหมดที่ฉันสร้าง ฉันชอบที่จะมีตัวเลือกในการเปลี่ยนสีของราชประสงค์

อัปเดต: สี Hex ของไอคอนเริ่มต้นคือ "# FE7569" นอกจากนี้คุณสามารถตั้งค่าภาพบนเครื่องหมายแทนการสร้างเครื่องหมายใหม่ด้วยไอคอนใหม่ ดังนั้นหากคุณต้องการให้ฟังก์ชั่นไฮไลต์คุณสามารถไปกับสิ่งนี้โดยใช้ฟังก์ชั่นด้านบน:

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

StyledMarker: ห้องสมุดสำหรับ Google Maps v3

ตั้งแต่ V2 ถูกแทนที่ด้วย V3 เมื่อก่อนฉันคิดว่าฉันควรอัปเดตคำตอบนี้ ฉันสร้างห้องสมุดสำหรับเครื่องหมายที่กำหนดเองที่สามารถพบได้ใน V3 Utility Library ที่นี่ (deadlink) จะช่วยให้สีและรูปร่างที่แตกต่างกันและคุณสามารถวางข้อความบนเครื่องหมายเช่นกัน ใช้งานได้โดยใช้ Google Charts API ซึ่งมีวิธีในการสร้างเครื่องหมายประเภท Google Maps อย่าลังเลที่จะดูซอร์สโค้ดหากคุณต้องการใช้ Google Charts API โดยตรง

อย่างไรก็ตามสิ่งที่เกี่ยวกับห้องสมุดนั้นคือการดูแลการกำหนดขอบเขตที่คลิกได้ของภาพเครื่องหมายเหล่านี้สำหรับคุณตัวอย่างเช่นฟองที่ยาวขึ้นพร้อมข้อความจะมีพื้นที่ที่สามารถคลิกได้เช่นเดียวกับตัวอย่าง (deadlink)

การออกแบบวัสดุ

แก้ไขมีนาคม 2019ขณะนี้มีสีหมุดแบบโปรแกรม

JAVASCRIPT บริสุทธิ์ไม่มีภาพสนับสนุนฉลาก

ไม่ต้องพึ่งพา Charts API อีกต่อไป

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });

ส่วนตัวแล้วฉันคิดว่าไอคอนที่สร้างโดย Google Charts API นั้นดูดีและง่ายต่อการปรับแต่งแบบไดนามิก

ดูคำตอบของฉันในGoogle Maps API 3 - สีมาร์กเกอร์ที่กำหนดเองสำหรับเครื่องหมาย (dot) เริ่มต้น

วิธีที่ง่ายที่สุดที่ฉันพบคือใช้ BitmapDescriptorFactory.defaultMarker () เอกสารประกอบมีตัวอย่างของการตั้งค่าสี จากรหัสของฉัน:

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))

ในการปรับแต่งเครื่องหมายคุณสามารถทำได้จากเครื่องมือออนไลน์นี้: https://materialdesignicons.com/

ในกรณีของคุณคุณต้องการmap-markerซึ่งมีให้ที่นี่: https://materialdesignicons.com/icon/map-markerและคุณสามารถกำหนดออนไลน์ได้

หากคุณต้องการเปลี่ยนค่าเริ่มต้นสีแดงเป็นสีน้ำเงินคุณสามารถโหลดไอคอนนี้: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

มันถูกกล่าวถึงในหัวข้อนี้: https://stackoverflow.com/a/32651327/6381715

บทความล่าสุดนี้แสดงตัวอย่างง่ายๆด้วยชุดไอคอนสีจำนวน จำกัด ของ Google แผนที่