将变量从 php 传递到 javascript google map

Question

我需要将一些 php 变量传递给初始化我的谷歌地图的外部 js 文件。当然，地图本身应该使用这些变量。现在我看不到我的地图正确加载，我得到了错误

TypeError: map is undefined

我什至不能传递我的变量！ 我正在尝试使用最简单的方法，例如

我的 php

<script type="text/javascript"> 
    var marker = <?php echo json_encode($marker_img); ?>; //this should send the marker image url
    var latitude = '<?php echo $post_latitude; ?>'; //this is the latitude
    var longitude = '<?php echo $post_longitude; ?>'; //this is the long
    var paddress = '<?php echo $address; ?>'; //this is the address name
</script>

现在我猜我在我的 js 中做错了什么：

var geocoder;
var map;
function initialize_map() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(latitude, longitude);
    var myOptions = {
        scrollwheel: false,
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"administrative","elementType":"labels","stylers":[{"saturation":"-100"}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"gamma":"0.75"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"lightness":"-37"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f9f9f9"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"40"},{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-37"}]},{"featureType":"landscape.natural","elementType":"labels.text.stroke","stylers":[{"saturation":"-100"},{"lightness":"100"},{"weight":"2"}]},{"featureType":"landscape.natural","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"80"}]},{"featureType":"poi","elementType":"labels","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"lightness":"-4"},{"saturation":"-100"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"},{"visibility":"on"},{"saturation":"-95"},{"lightness":"62"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road","elementType":"labels","stylers":[{"saturation":"-100"},{"gamma":"1.00"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"gamma":"0.50"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"gamma":"0.50"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"},{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"lightness":"-13"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"lightness":"0"},{"gamma":"1.09"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"},{"saturation":"-100"},{"lightness":"47"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"lightness":"-12"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"},{"lightness":"77"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"lightness":"-5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"saturation":"-100"},{"lightness":"-15"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"lightness":"47"},{"saturation":"-100"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"water","elementType":"geometry","stylers":[{"saturation":"53"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"lightness":"-42"},{"saturation":"17"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"lightness":"61"}]}],
    },
    map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function codeAddress(address) {
    geocoder.geocode( { 'address': paddress}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new MarkerWithLabel({
                position: results[0].geometry.location,
                map: map, //Here I get the error
                icon: pointer, //Here I don't get any image
                labelContent: paddress, //here I don't get any address
                labelAnchor: new google.maps.Point(22, 0),
                labelClass: "labels",
                labelStyle: {opacity: 1.0},
            });
        } else {
        //alert("Geocode was not successful for the following reason: " + status);
        }
    });
}
initialize_map();
codeAddress('location');

它显示的地图，我看到它但没有参数。怎么了？？？

Answer 1

我收到一个 javascript 错误：Uncaught TypeError: Cannot read property 'setCenter' of undefined 在这一行：

map.setCenter(results[0].geometry.location);

主要问题是mapOptions 变量定义末尾的逗号，这使得map 变量的以下声明局部于initialize_map 函数，使initialize_map 中的行初始化全局 map 将其更改为分号 (;)。

proof of concept fiddle

代码 sn-p：

// var marker = <?php echo json_encode($marker_img); ?>; //this should send the marker image url
var latitude = '40.7127837'; //this is the latitude
var longitude = '-74.0059413'; //this is the long
var paddress = 'New York, NY'; //this is the address name

var geocoder;
var map;

function initialize_map() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(latitude, longitude);
  var myOptions = {
    scrollwheel: false,
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      "featureType": "administrative",
      "elementType": "all",
      "stylers": [{
        "visibility": "on"
      }, {
        "lightness": 33
      }]
    }, {
      "featureType": "administrative",
      "elementType": "labels",
      "stylers": [{
        "saturation": "-100"
      }]
    }, {
      "featureType": "administrative",
      "elementType": "labels.text",
      "stylers": [{
        "gamma": "0.75"
      }]
    }, {
      "featureType": "administrative.neighborhood",
      "elementType": "labels.text.fill",
      "stylers": [{
        "lightness": "-37"
      }]
    }, {
      "featureType": "landscape",
      "elementType": "geometry",
      "stylers": [{
        "color": "#f9f9f9"
      }]
    }, {
      "featureType": "landscape.man_made",
      "elementType": "geometry",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "40"
      }, {
        "visibility": "off"
      }]
    }, {
      "featureType": "landscape.natural",
      "elementType": "labels.text.fill",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "-37"
      }]
    }, {
      "featureType": "landscape.natural",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "100"
      }, {
        "weight": "2"
      }]
    }, {
      "featureType": "landscape.natural",
      "elementType": "labels.icon",
      "stylers": [{
        "saturation": "-100"
      }]
    }, {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "80"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "0"
      }]
    }, {
      "featureType": "poi.attraction",
      "elementType": "geometry",
      "stylers": [{
        "lightness": "-4"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "geometry",
      "stylers": [{
        "color": "#c5dac6"
      }, {
        "visibility": "on"
      }, {
        "saturation": "-95"
      }, {
        "lightness": "62"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "labels",
      "stylers": [{
        "visibility": "on"
      }, {
        "lightness": 20
      }]
    }, {
      "featureType": "road",
      "elementType": "all",
      "stylers": [{
        "lightness": 20
      }]
    }, {
      "featureType": "road",
      "elementType": "labels",
      "stylers": [{
        "saturation": "-100"
      }, {
        "gamma": "1.00"
      }]
    }, {
      "featureType": "road",
      "elementType": "labels.text",
      "stylers": [{
        "gamma": "0.50"
      }]
    }, {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [{
        "saturation": "-100"
      }, {
        "gamma": "0.50"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [{
        "color": "#c5c6c6"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry.stroke",
      "stylers": [{
        "lightness": "-13"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "labels.icon",
      "stylers": [{
        "lightness": "0"
      }, {
        "gamma": "1.09"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry",
      "stylers": [{
        "color": "#e4d7c6"
      }, {
        "saturation": "-100"
      }, {
        "lightness": "47"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry.stroke",
      "stylers": [{
        "lightness": "-12"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "labels.icon",
      "stylers": [{
        "saturation": "-100"
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry",
      "stylers": [{
        "color": "#fbfaf7"
      }, {
        "lightness": "77"
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry.fill",
      "stylers": [{
        "lightness": "-5"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry.stroke",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "-15"
      }]
    }, {
      "featureType": "transit.station.airport",
      "elementType": "geometry",
      "stylers": [{
        "lightness": "47"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#acbcc9"
      }]
    }, {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [{
        "saturation": "53"
      }]
    }, {
      "featureType": "water",
      "elementType": "labels.text.fill",
      "stylers": [{
        "lightness": "-42"
      }, {
        "saturation": "17"
      }]
    }, {
      "featureType": "water",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "lightness": "61"
      }]
    }],
  };
  map = new google.maps.Map(document.getElementById("map"), myOptions);
}

function codeAddress(address) {
  geocoder.geocode({
    'address': paddress
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new MarkerWithLabel({
        position: results[0].geometry.location,
        map: map, //Here I get the error
        //icon: pointer, //Here I don't get any image
        labelContent: paddress, //here I don't get any address
        labelAnchor: new google.maps.Point(22, 0),
        labelClass: "labels",
        labelStyle: {
          opacity: 1.0
        },
      });
    } else {
      //alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
initialize_map();
codeAddress('location');

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map"></div>

Answer 2

快速修复
返回map，否则你的codeAddress函数将运行而不等待前一个函数；）

function initialize_map() {
 ....
 return map;
}

window.map = initialize_map();
codeAddress('location');

不确定你的 php 东西，如果它有效，一个问题可能是另一个范围。

尝试将变量映射到全局window 对象，如图所示。（快速修复）