1

次のコードの動作:

function()
    {
    var Marker = new google.maps.Marker();
    var MarkerOptions = {};
    MarkerOptions.map = my_map;
    MarkerOptions.position = new google.maps.LatLng(0,0);
    MarkerOptions.animation = google.maps.Animation.DROP;
    MarkerOptions.clickable = true;
    MarkerOptions.cursor = 'pointer';

    Marker.smallicon = [{
        anchor:null,
        origin:null,
        scaledSize:null,
        size:new google.maps.Size(20,32),
        url:'http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png'
        }];

    Marker.setOptions(MarkerOptions);
    }

そして、この1行を追加した後、エラーだらけのコンソール撮影

function()
    {
    var Marker = new google.maps.Marker();
    var MarkerOptions = {};
    MarkerOptions.map = way_map;
    MarkerOptions.position = new google.maps.LatLng(0,0);
    MarkerOptions.animation = google.maps.Animation.DROP;
    MarkerOptions.clickable = true;
    MarkerOptions.cursor = 'pointer';

    Marker.smallicon = [{
        anchor:null,
        origin:null,
        scaledSize:null,
        size:new google.maps.Size(20,32),
        url:'http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png'
        }];

    Marker.setIcon(Marker.smallicon);
    Marker.setOptions(MarkerOptions);
    }

私はそれをもっと理解していません、それは動作しgoogle.maps.MarkerImageますが参考に書かれています

マーカー アイコンまたは影のイメージを表す構造体。このクラスは、Icon を優先して非推奨になりました。

だから私はアイコンを操作しようとしています。彼らはそれをコンストラクタからオブジェクトに変更したので、呼び出しのモデルが変更されました。

4

3 に答える 3

2

Marker.smallicon現在は配列であり、google.maps.Icon

次のいずれかを使用します。

Marker.setIcon(Marker.smallicon[0]);

またはそれをオブジェクトにします：

Marker.smallicon = {
        size:new google.maps.Size(20,32),
        url:'http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png'
        };

注: a のすべてのオプションを設定する必要はありません。設定したくないオプションgoogle.maps.Iconは省略してください。

于 2013-01-21T15:24:34.663 に答える
1

使用する：

icon: {url:'http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png'}

それ以外の

url:'http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png'
于 2013-01-21T15:20:03.117 に答える
0

私はこれでいいと思います

//adapted from http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html
function CustomMarker(latlng, map, imageSrc) {
    this.latlng_ = latlng;
    this.imageSrc = imageSrc;
    // Once the LatLng and text are set, add the overlay to the map.  This will
    // trigger a call to panes_changed which should in turn call draw.
    this.setMap(map);
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function () {
    // Check if the div has been created.
    var div = this.div_;
    if (!div) {
        // Create a overlay text DIV
        div = this.div_ = document.createElement('div');
        // Create the DIV representing our CustomMarker
        div.className = "customMarker"


        var img = document.createElement("img");
        img.src = this.imageSrc;
        div.appendChild(img);
        google.maps.event.addDomListener(div, "click", function (event) {
            google.maps.event.trigger(me, "click");
        });

        // Then add the overlay to the DOM
        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }

    // Position the overlay 
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
    if (point) {
        div.style.left = point.x + 'px';
        div.style.top = point.y + 'px';
    }
};

CustomMarker.prototype.remove = function () {
    // Check if the overlay was on the map and needs to be removed.
    if (this.div_) {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }
};

CustomMarker.prototype.getPosition = function () {
    return this.latlng_;
};

var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 17,
    center: new google.maps.LatLng(37.77088429547992, -122.4135623872337),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var data = [{
    profileImage: "http://www.gravatar.com/avatar/d735414fa8687e8874783702f6c96fa6?s=90&d=identicon&r=PG",
    pos: [37.77085, -122.41356],
}, {
    profileImage: "http://placekitten.com/90/90",
    pos: [37.77220, -122.41555],
}]

for(var i=0;i<data.length;i++){
new CustomMarker(new google.maps.LatLng(data[i].pos[0],data[i].pos[1]), map,  data[i].profileImage)
}
.customMarker {
        position:absolute;
        cursor:pointer;
        background:#424242;
        width:48px;
        height:48px;
        /* -width/2 */
        margin-left:-42px;
        /* -height + arrow */
        margin-top:-84px;
        border-radius:24px;
        padding:0px;
    }
    .customMarker:after {
        content:"";
        position: absolute;
        bottom: -13px;
        left: 10px;
        border-width: 18px 14px 0;
        border-style: solid;
        border-color: #424242 transparent;
        display: block;
        width: 0;
    }
    .customMarker img {
        width:36px;
        height:36px;
        margin:6px;
        border-radius:20px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div id="map" style="width: 640pxpx; height: 480px;">map div</div>

于 2017-07-01T07:27:40.960 に答える