我可以在CSS元素中添加CSS样式吗？

Question

I'm pulling a user's location and displaying it on a map with an icon I have saved. 我要拉出用户的位置，并使用我保存的图标将其显示在地图上。 The icon I have saved is too big, so I'm trying to resize it with CSS but I'm not sure how to do that loading the svg into the js file. 我保存的图标太大，因此我正在尝试使用CSS调整其大小，但不确定如何将svg加载到js文件中。 I'm not sure if I should load the svg file in the html document or in the js file like I have. 我不确定是否应该像我一样将svg文件加载到html文档或js文件中。

I tried loading the icon into the html file, give it an id, and use .getElementById to add it into the js file and then just add css styling in the css file but for some reason that didn't work. 我尝试将图标加载到html文件中，给它提供一个ID，然后使用.getElementById将其添加到js文件中，然后仅在css文件中添加css样式，但是由于某些原因无法正常工作。 I'm not sure if I did something incorrectly doing it that way, though. 不过，我不确定我是否做了某些错误的事情。

 function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 12, disableDefaultUI: true }); // User Location Icon var userLocationIcon = 'img/SVG/User_Location.svg'; // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; //Centers map to current position map.setCenter(pos); //Sets icon to current position var currentLocation = new google.maps.Marker({ position: pos, map: map, icon: userLocationIcon }); }, function() { handleLocationError(true, infoWindow, map.getCenter()); }); } else { // Browser doesn't support Geolocation handleLocationError(false, infoWindow, map.getCenter()); } } function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos); infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\\'t support geolocation.'); }

 html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } #map { height: 100%; }

 <!DOCTYPE html> <html> <head> <title>Geolocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/app.css"> </head> <body> <div id="map"></div> <script type="text/javascript" src="js/app.js"></script> </script> </body> </html>

Answer 1

I believe it's unsupported using the basic API as the Map is in an iframe , whose elements do not inherit your CSS by default. 我相信它不支持使用基本API，因为Map在iframe ，默认情况下其元素不会继承CSS。

However here's a solution I found which uses an external library. 但是，这是我发现的使用外部库的解决方案。

var marker = new MarkerWithLabel({
    position: myMap.getCenter(),
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 0, //tamaño 0
    },
    map: myMap,
    draggable: true,
    labelAnchor: new google.maps.Point(10, 10),
    labelClass: "label", // the CSS class for the label
});

http://codepen.io/diana_aceves/pen/HjKdx http://codepen.io/diana_aceves/pen/HjKdx

There's also RichMarker. 还有RichMarker。

Both plugins can be found here: http://googlemaps.github.io/libraries.html 这两个插件都可以在这里找到： http : //googlemaps.github.io/libraries.html

Unfortunately for you though, github's down. 但是对您来说不幸的是，github崩溃了。

我可以在CSS元素中添加CSS样式吗？

问题描述

1 个解决方案

解决方案1
2 2016-01-28 02:28:36

我可以在CSS元素中添加CSS样式吗？

问题描述

1 个解决方案

解决方案1 2 2016-01-28 02:28:36

解决方案1
2 2016-01-28 02:28:36