Javascript 在标记的中心创建文本_Javascript_Google Maps Api 3

Javascript 在标记的中心创建文本

javascript google-maps-api-3

Javascript 在标记的中心创建文本,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我已经用谷歌地图API玩了几天了，大部分情况下都很简单，但有一件事我们需要做，我不知道。正如你在下面的例子中所看到的，我已经使用了标签，但是我无法让它们看起来像我在下图中看到的那样。有人能给我指一份推荐信，让我达到我的要求吗如果您正在寻找makerwithlable.js，您可以从这里获得它。。这就是我得到它的地方： { var showOnStartInfoWindows=true； //创建位置。。 var arrayAll=[]； var标记=[]； var jax=new goog

我已经用谷歌地图API玩了几天了，大部分情况下都很简单，但有一件事我们需要做，我不知道。正如你在下面的例子中所看到的，我已经使用了标签，但是我无法让它们看起来像我在下图中看到的那样。有人能给我指一份推荐信，让我达到我的要求吗

如果您正在寻找makerwithlable.js，您可以从这里获得它。。这就是我得到它的地方：


{
var showOnStartInfoWindows=true；
//创建位置。。
var arrayAll=[]；
var标记=[]；
var jax=new google.maps.LatLng（30.318028，-81.674474）；
var leesburg=newgoogle.maps.LatLng（28.810750，-81.880056）；
var-map=null；
arrayAll[0]={loc:jax，大小：5000，信息：“佛罗里达州杰克逊维尔32204”}；
arrayAll[1]={loc:leesburg，大小：1000，信息：“leesburg，FL”}；
//创建位置。。
}
函数初始化（）
{
//把地图放在杰克逊维尔的中心
var mapProp={
中心：arrayAll[0]。位置，
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//设置google的API并通过ID传递DIV。
map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
var bounds=new google.maps.LatLngBounds（leesburg，jax）；
映射边界（bounds）；
var maxSize=0；
对于（变量i=0；i如果（maxSize基于size
的值，您可以设置样式（字体大小、宽度、高度等）和labelAnchor


{
var showOnStartInfoWindows=true；
//创建位置。。
var arrayAll=[]；
var标记=[]；
var jax=new google.maps.LatLng（30.318028，-81.674474）；
var leesburg=newgoogle.maps.LatLng（28.810750，-81.880056）；
var-map=null；
arrayAll[0]={
loc:jax，
尺寸：5000，
信息：“佛罗里达州杰克逊维尔32204”
};
arrayAll[1]={
地点：利斯堡，
尺寸：1000，
信息：“佛罗里达州利斯堡”
};
//创建位置。。
}
函数初始化（）{
//把地图放在杰克逊维尔的中心
var mapProp={
中心：arrayAll[0]。位置，
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//设置google的API并通过ID传递DIV。
map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
var bounds=new google.maps.LatLngBounds（leesburg，jax）；
映射边界（bounds）；
var maxSize=0；
对于（变量i=0；i

html，
身体，
#谷歌地图{
保证金：0；
填充：0；
身高：100%；
}
.谷歌标签{
颜色：#000；
字体大小：粗体；
文本对齐：居中；
}

我看到您使用的MakerwithLabel与我使用的不同..谢谢..您已经加载了库，但您在发布的代码中根本没有使用MarkerWithLabel不确定您的意思。MarkerWithLabel.js是我的代码工作所必需的。删除它，会返回一个空白映射。
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="markerwithlabel.js" type="text/javascript"></script>

<script>
{
    var showOnStartInfoWindows = true;
    //create locations..
    var arrayAll = [];
    var marker = [];
    var jax = new google.maps.LatLng(30.318028, -81.674474);
    var leesburg = new google.maps.LatLng(28.810750, -81.880056);
    var map = null;

    arrayAll[0] = {loc: jax, size: 5000, info: "Jacksonville, FL 32204"};
    arrayAll[1] = {loc: leesburg, size: 1000, info: "Leesburg, FL"};
    //EO create locations..
}

function initialize()
{
    //center the map on Jacksonville
    var mapProp = {
      center:arrayAll[0].loc,
      zoom:6,
      mapTypeId:google.maps.MapTypeId.ROADMAP
      };

  //set google's API and pass the DIV by ID.
    map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

    var bounds = new google.maps.LatLngBounds(leesburg, jax);
  map.fitBounds(bounds);

    var maxSize = 0;
    for(var i = 0; i < arrayAll.length; i++)
    {
        if(maxSize<arrayAll[i].size)
            maxSize = arrayAll[i].size;
    }

    for(var i = 0; i < arrayAll.length; i++)
    {
        var size = Math.round((arrayAll[i].size/maxSize)*100);

        //create marker
        marker[i] = new google.maps.Marker({
          position:arrayAll[i].loc,
        map: map,
        title: 'Right-Click to zoom all the way in.\nLeft-Click to zoom to a state level.',
            draggable: false,
            raiseOnDrag: false,
            labelAnchor: new google.maps.Point(22, 0),
            labelClass: "googleLabel", // the CSS class for the label
        labelContent: arrayAll[i].info,
            icon: {
                path: google.maps.SymbolPath.CIRCLE,        //BACKWARD_CLOSED_ARROW
                fillOpacity: 0.3,
                fillColor: '#0000ff',
                strokeOpacity: 1.0,
                strokeColor: '#0000ff',
                strokeWeight: 1.0, 
                scale: size, //pixels
              }
        });

        marker[i].setMap(map);
        //EO create marker

        marker_onclick(marker[i]);
        marker_info(marker[i]);
    }
}

function marker_onclick(marker) {
        google.maps.event.addListener(marker, 'dblclick', function(o) {
            map.setZoom(18);
            map.setCenter(marker.position);
        });

        google.maps.event.addListener(marker, 'click', function(o) {
            map.setZoom(7);
            map.setCenter(marker.position);
        });

        google.maps.event.addListener(marker, 'rightclick', function(o) {
                alert('Could route to different URL:\n' + marker.position);
        });
}

function marker_info(marker) {
        //create popup notice..
        var infowindow = new google.maps.InfoWindow({
        content:marker.labelContent
      });

        if(showOnStartInfoWindows)
            infowindow.open(map, marker);

        google.maps.event.addListener(marker, 'mouseover', function (o) {
            //alert('over'); 
            infowindow.open(map, marker); 
        });
        google.maps.event.addListener(marker, 'mouseout', function (o) { 
            //alert('out');
            infowindow.close(map, marker); 
        });
        //EO create popup notice..
}

{
    google.maps.event.addDomListener(window, 'load', initialize);
}
</script>
</head>

<body>
<div id="googleMap" style="width:640px;height:640px;"></div>
</body>
</html>