Question

我正在使用jquery mobile gmap插件在谷歌地图中添加一个标记。我想在其中添加样式（类）。这怎么可能？普通图像图标工作正常 -

$('#map_canvas').gmap({'disableDefaultUI':false, 'zoom':15, 'callback': function() {
        var self = this;
        clientPosition = new google.maps.LatLng(34.0983425, -118.3267434);
        self.addMarker({
            position: clientPosition,
            icon: 'images/myImage.png',
            bounds: false
        });
        self.get('map').panTo(clientPosition);
    }});

我正在使用以下样式的圆形图像图标，它可以正常使用图像 -

.icon_circle {
width:50px;
height:50px;
border-radius:100%;
border: 1px solid #07c;
box-shadow: 0 0 20px #07c;
}

我想在标记图标上使用相同的样式。

Answer 1

<强>原始

通常我们会检查生成的HTML以获取类名（或至少是它的路径）并将CSS写入其中。

如果我们发现了一些名为.gmap_icon_container的内容，我们可能会这样做：

.gmap_icon_container img {
  /* css here */
}

修改：

按照我的建议通过爬行检查器访问谷歌地图标记很困难（尽管可能，它不可靠）

然而......如果你真的想要设置这些样式，你可以（我还没有测试过）使用javascript google map API设置自定义图标，然后访问它并设置一个通过JQUERY上课，并使用CSS设置该类。

通过google api设置标记：

var iconBase = 'http://myserver.com/images/mapicons';
var icons = {
  me: {
    icon: iconBase + 'mylocation.png'
  },
  others: {
    icon: iconBase + 'otherlocations.png'
  },
};

function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map
  });
}

通过JQUERY获取课程并设置其课程：

$("img[src='http://myserver.com/images/mapicons/mylocation.png']")[0].addClass( "mylocation_icon" )
$("img[src='http://myserver.com/images/mapicons/otherlocations.png']").addClass( "otherlocations_icon" )

和css：

.mylocation_icon { /*css here*/ }
.otherlocations_icon { /*css here*/ }

jQuery谷歌地图添加标记与样式图像图标

1 个答案: