MarkerWithLabel在放大時移動

我在我的谷歌地圖上遇到問題我正在使用MarkerWithLabel並導入自己的圖像標籤，問題是當我放大和縮小標記從原始點向東南移動時。我不知道爲什麼，因爲使用普通標記一切都很正常，標記粘在其位置上。下面的鏈接到我的地圖的小提琴。有人能告訴我如何使這個標記在縮放時不從原始點移動？MarkerWithLabel在放大時移動

謝謝。

http://jsfiddle.net/pfxvno07/1/

var latLng = new google.maps.LatLng(48.864716, 2.349014); 


var map; 
    var mapOptions = { 
       zoom: 15, 
       center: new google.maps.LatLng(48.864716, 2.349014), 
       disableDefaultUI: true, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       scrollwheel: true, 
       panControl:true, 
       zoomControl:true, 
       mapTypeControl:true, 
       scaleControl:true, 
       streetViewControl:true, 
       overviewMapControl:true, 
       rotateControl:true 
} 

map = new google.maps.Map(document.getElementById('map'), mapOptions); 


       var marker = new MarkerWithLabel({ 
        position: latLng , 
        draggable: false, 
        //raiseOnDrag: true, 
        map: map, 
        labelContent: 10+1, 
        labelAnchor: new google.maps.Point(0, 0), 
        labelClass: "label"+2, //the CSS class for the label 
        labelStyle: {opacity: 1}, 
        icon: { url: '', size: null, origin: null, anchor: null} 
       });

來源

2014-12-05 stephane lemaitre

設置正確的錨的圖標。你的jsfiddle有javascript錯誤'Uncaught TypeError：undefined不是一個函數'，'Uncaught TypeError：不能讀取'undefined'的屬性'style' – geocodezip 2014-12-05 06:14:14

設置圖標正確的錨。您正在以非標準方式使用它。這個工作對我來說：

var marker = new MarkerWithLabel({ 
    position: latLng, 
    draggable: false, 
    map: map, 
    labelContent: 10 + 1, 
    labelAnchor: new google.maps.Point(16, 29), 
    labelClass: "label" + 2, //the CSS class for the label 
    labelStyle: { 
    opacity: 1 
    }, 
    icon: { 
    url: 'http://momentale.com/resources/images/icon/mapPin_2.png', 
    size: new google.maps.Size(32, 29) 
    } 
});

工作代碼片段：

var latLng = new google.maps.LatLng(48.864716, 2.349014); 
 

 

 
var map; 
 
var mapOptions = { 
 
    zoom: 15, 
 
    center: new google.maps.LatLng(48.864716, 2.349014), 
 
    disableDefaultUI: true, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    scrollwheel: true, 
 
    panControl: true, 
 
    zoomControl: true, 
 
    mapTypeControl: true, 
 
    scaleControl: true, 
 
    streetViewControl: true, 
 
    overviewMapControl: true, 
 
    rotateControl: true 
 
} 
 

 
map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 

 
var marker = new MarkerWithLabel({ 
 
    position: latLng, 
 
    draggable: false, 
 
    //raiseOnDrag: true, 
 
    map: map, 
 
    labelContent: 10 + 1, 
 
    labelAnchor: new google.maps.Point(16, 29), 
 
    labelClass: "label" + 2, //the CSS class for the label 
 
    labelStyle: { 
 
    opacity: 1 
 
    }, 
 
    icon: { 
 
    url: 'http://momentale.com/resources/images/icon/mapPin_2.png', 
 
    size: new google.maps.Size(32, 29) 
 
    } 
 
});

#map { 
 
    width: 600px; 
 
    height: 600px; 
 
    position: relative; 
 
    top: 2px; 
 
    left: 28px; 
 
} 
 
.label2 { 
 
    height: 29px; 
 
    width: 32px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-family: Tahoma; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    background-image: url('http://momentale.com/resources/images/icon/mapPin_2.png'); 
 
}

<script src="http://maps.google.com/maps/api/js"></script> 
 
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/markerwithlabel/src/markerwithlabel.js"></script> 
 
<div id="map"></div>

working fiddle

來源

2014-12-05 06:30:54 geocodezip

MarkerWithLabel在放大時移動

回答

相關問題