-1

嗨,我对这个话题很陌生,经过几个小时的尝试,我已经接近目标了,但不是在那里,我想我需要一点点踢。

到目前为止,我能够创建一个样式化的地图并在地图上放置 2 个标记。缩放和其他一些东西对我来说很清楚如何影响。

这是代码:

<html>
<head> 
<title> test map </title>

<style type="text/css">
        #map {
            width: 750px;
            height: 500px;
        }
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
<script type="text/javascript"> 
    google.maps.event.addDomListener(window, 'load', init);

    function init()
    {

    var mapOptions = {
        zoom: 2,
        panControl: true,
        zoomControl: true,
        center: new google.maps.LatLng(33.524385, -112.048899),
        // 
        styles: [
        {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}]}, {
            "featureType": "landscape",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 20}]}, {
            "featureType": "road.highway",
            "elementType": "geometry.fill",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}]}, {
            "featureType": "road.highway",
            "elementType": "geometry.stroke",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 29}, {
                "weight": 0.2}]}, {
            "featureType": "road.arterial",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 18}]}, {
            "featureType": "road.local",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 16}]}, {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 21}]}, {
            "elementType": "labels.text.stroke",
            "stylers": [
            {
                "visibility": "on"}, {
                "color": "#000000"}, {
                "lightness": 16}]}, {
            "elementType": "labels.text.fill",
            "stylers": [
            {
                "saturation": 36}, {
                "color": "#000000"}, {
                "lightness": 40}]}, {
            "elementType": "labels.icon",
            "stylers": [
            {
                "visibility": "off"}]}, {
            "featureType": "transit",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 19}]}, {
            "featureType": "administrative",
            "elementType": "geometry.fill",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 20}]}, {
            "featureType": "administrative",
            "elementType": "geometry.stroke",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}, {
                "weight": 1.2}]}]
    };

    var mapElement = document.getElementById('map');

    var myMap = new google.maps.Map(mapElement, mapOptions);


    var pos = new google.maps.LatLng(33.524385, -12.048899);
    var poi_marker = new google.maps.Marker(
    {
        map: myMap,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: pos
    });

    var pos = new google.maps.LatLng(5.524385, -12.048899);
    var poi_marker = new google.maps.Marker(
    {
        map: myMap,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: pos



    });

} 
</script>
</head> 
<body>

<div id="map"> </div>
</body>
</html>

什么对我有用。我看到我喜欢的风格加上经典标记的 2 个位置。

从上面的代码映射样本

然后我环顾四周,发现您可以使用带有标记的信息框。我想为我创建的每个标记将 HTLM 添加到这些框中。

谷歌代表。给出了这个对我来说很好的例子:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max?hl=en

我想像在 2 个简单的标记位置上那样将其中的几个添加到我的地图中,但老实说,我不知道在哪里放置我在上面的链接中看到的代码。

在过去的 2 小时里尝试了各种方法,现在吃饱了。我做错了什么,因为这应该有效。

如果有人知道的话,糖果上的樱桃会在哪里放置代码以赋予标记我自己的风格。我已经找到了一些例子。所以我会很酷一直定制它。

感谢您的帮助、想法或您贡献的任何东西!

4

1 回答 1

2

当您单击标记时,您希望信息框传播吗?为此,您需要设置一个侦听器来侦听要单击的每个绘制的标记,然后在完成后生成一个信息框。

function infoBoxCreator() {

  var raInfoBoxElement = document.createElement('div');

  var infoBoxInfo = document.createElement('div');
  infoBoxInfo.className = 'infobox_content';
  infoBoxInfo.innerHTML = 'Text In My Infobox';

  raInfoBoxElement.appendChild(raNameElement);

  var infoBoxText = raInfoBoxElement;

  plotMarker(infoBoxText);
}


function plotMarker(infoBoxText) {

  var coordinate = new google.maps.LatLng(someLAT, someLONG);
  var infowindow = new google.maps.InfoWindow();

// Create the marker
  var marker = new google.maps.Marker({
    map: map,
    position: coordinate
  });

// Create Info window and destroy any other open infowindows
google.maps.event.addListener(marker, "click", function() {
    if (infowindow)
        infowindow.close();
    infowindow = new google.maps.InfoWindow({content: infoBoxText});
    infowindow.open(map, marker);
});

编辑:标记样式是指自定义图标吗?google.maps.Marker只需输入icon: new google.maps.MarkerImage(FILEPATH)您想用作自定义标记的图像的文件路径即可。

编辑2:还是一大早。我忘了var infowindow = new google.maps.InfoWindow();我现在已经添加了它。

编辑 3:在信息框已经工作的地图中,只需让您的 mapOptions 看起来像这样:

var mapOptions = {
    center: new google.maps.LatLng(37.276087947677254, -12.048898999999995),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]}],
    streetViewControl: false
};

这对我有用。

于 2013-12-19T01:07:18.997 回答